Need Jquery for button mouseover scroll to top

Question

I have used overflow:hidden style to hide scrollbar in all browser. And added jquery function to button for scroll down the content, its working fine. I need to apply scroll top function to other button or need to add mousescroll

$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(interval);
    });
});

Check my Fiddle: https://jsfiddle.net/vuer5oyu/

Simple code: https://jsfiddle.net/vuer5oyu/ – vishnu Jun 24 '17 at 10:31 — vishnu, Jun 24 '17 at 10:31

score 2 · Accepted Answer · answered Jun 24 '17 at 10:41

https://jsfiddle.net/9Luvrvc1/1/

You can just use the same code, with a minus at the counter function:

$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        intervalDown = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(intervalDown);
    });

    $(".ca-bottom").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        intervalUp = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos - count);
        }, 10);
    }).click(function() {
        if (count > 6) {
             count = count-1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(intervalUp);
    });    

});

However you can try to make a function like scroll(direction) - which will make your code shorter and better to read.

Thanks :) its working... is it possible to add "Mouse wheel scroll" function? — vishnu, Jun 24 '17 at 10:45
Yes, have a look at this: https://stackoverflow.com/questions/3715496/binding-to-the-scroll-wheel-when-over-a-div — ESP32, Jun 24 '17 at 10:49

score 1 · Answer 2 · answered Jun 24 '17 at 10:42

You could use div.scrollTop(pos - count); as you will get the current top postion of scroll by this line var pos = div.scrollTop();, so you could decrement the value passed in scrollTop()

interval = setInterval(function(){
        count = count || 1;
        var pos = div.scrollTop();
        div.scrollTop(pos - count);
    }, 10);

$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
    debugger;
        var div = $('.box');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        // count = 0;
        clearInterval(interval);
    });
    
    $(".ca-bottom").on('mouseover', function() {
        var div = $('.box');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos - count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        // count = 0;
        clearInterval(interval);
    });
})
;

.con {
 width: 300px;
 height: 300px;
 position: relative;
}
.box {
 width: 100%;
 max-height: 300px;
 background: #eee;
 overflow:hidden
}
.cat-nav {
 width: 100%;
 background: transparent;
 position: absolute;
 bottom: 0;
 left: 0;
    right: 0;
 text-align:center;
 color:#fff;
 cursor:pointer
}
.cat-nav a {
 width:50%;
 float:left;
 padding:10px 0;
 display:block
}
.cat-nav .ca-top {
 background:#d8aa22
}
.cat-nav .ca-bottom {
 background:#333
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="con">
  <div class="box"> content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
    content<br>
  </div>
  <div class="cat-nav">
      <a class="ca-top">down</a><a class="ca-bottom">up</a>
      </div>
</div>

Need Jquery for button mouseover scroll to top

2 Answers2