CODEWITHSUNDEEP
javascriptjquerybuttonclicksmooth-scrolling
HerbalChaos420
HerbalChaos420

Reputation: 147

Add smooth-vertical scrolling within specific div overflow, via buttons

I have a div on my site which is populated with blogs from an RSS feed. On the top and bottom, are buttons to scroll up and down within the div (as it has hidden overflow for extra blogs). I'm wondering what I need to add, in order to make this a smooth scroll, rather than just snap-scrolling on click.

HTML: 

<div class="col-md-4 hidden-xs hidden-sm" id="blogSection">
    <div class="row" id="scrollUp">
        <button id="downClick"><i class="fa fa-chevron-up fa-2x"></i></button>
    </div>
    <!-- ------------ BLOGS RSS FEED POPULATED ------------- -->    
    <div id="homeBlogs">
        <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblogs.msbcollege.edu%2Ffeed%2F&chan=y&desc=250>1&targ=y&utf=y"  charset="UTF-8" type="text/javascript"></script>
        <noscript>
        <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fblogs.msbcollege.edu%2Ffeed%2F&chan=y&desc=250>1&targ=y&utf=y&html=y">View RSS feed</a>
        </noscript>
    </div>
    <!-- END RSS POPULATION ---------- -->
    <div class="row" id="scrollDown">
        <button id="upClick"><i class="fa fa-chevron-down fa-2x"></i></button>
    </div>
</div>

JS:

$(document).ready(function() {


$("#upClick").click(function() {
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() + 200);
  });

  $("#downClick").click(function() {
    $('#homeBlogs').scrollTop($('#homeBlogs').scrollTop() - 200);
  });

});

Upvotes: 0

Views: 1064

Answers (1)

Frank Egan
Frank Egan

Reputation: 146

Since you are using jQuery, you are probably looking for the jQuery animate library:

var scrollTime = 2000;

$('#upClick').click(function() {
    $('#homeBlogs').animate({
        scrollTop: $('#homeBlogs').scrollTop() + 200
    }, scrollTime);
});


$('#downClick').click(function() {
    $('#homeBlogs').animate({
        scrollTop: $('#homeBlogs').scrollTop() - 200
    }, scrollTime);
});

Upvotes: 1

Related Questions