Question

我的网站上有一个div，其中包含来自RSS Feed的博客。在顶部和底部，是在div中向上和向下滚动的按钮（因为它有额外的博客隐藏溢出）。我想知道我需要添加什么，以便使其成为一个平滑的滚动，而不仅仅是点击时的快照滚动。

HTML：

myMethods

JS：

<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>

Answer 1

由于您使用的是jQuery，因此您可能正在寻找jQuery动画库：

var scrollTime = 2000;

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


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

通过按钮在特定div溢出内添加平滑垂直滚动

1 个答案: