Automatically Scroll Page from Top to Bottom, then

2020-02-11 02:42发布

站内问答 / JavaScript
1300 5 4

I'm trying to figure out how to, upon pageload, automatically scroll to the bottom of a page (which has been described sufficiently here) and then scroll back up automatically upon reaching the bottom of the page. I can find the automatic scrolling to the bottom, but I can't figure out how to identify when I'm at the bottom of the page, and how to scroll back up when I am. I'd do this using generic Javascript (or JQuery).

Thanks in advance!

5条回答
时光不老，我们不散
2楼-- · 2020-02-11 02:50 
$("body").animate({ scrollTop: '1000' }, 500, function(){
    $("body").animate({ scrollTop: '0' }, 500, function(){
        $("body").animate({ scrollTop: '1000' }, 500);
    });
});
查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2020-02-11 02:52

here is the example using Pure JavaScript 

<script type="application/javascript">

var Height = document.documentElement.scrollHeight;
var currentHeight = 0;
var bool = true;
var step = 5;
var speed = 10;
var interval = setInterval(scrollpage, speed)

function scrollpage() {
    if (currentHeight < 0 || currentHeight > Height) 
        bool = !bool;
    if (bool) {
        window.scrollTo(0, currentHeight += step);
    } else {
        // if you don't want to continue scroll 
        // clearInterval(interval) use clearInterval
        window.scrollTo(0, currentHeight -= step);
    }
}

</script>
<style type="text/css"> 

#top {
    border: 1px solid black;
    height: 10000px;
}
#bottom {
    border: 1px solid red;
}

</style>
<div id="top">top</div>
<div id="bottom">bottom</div>

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2020-02-11 03:01

Try this: http://jsfiddle.net/yjYJ4/

$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000, function() {
    $(this).animate({ scrollTop: 0 }, 1000);
});

You can view the demo in full screen here: http://jsfiddle.net/yjYJ4/embedded/result/

Change the number "1000" if you want to increase or decrease speed.

Works fine in Chrome, Firefox and IE 6-9.

EDIT:

If you need it to repeat forever (not recommended...) you could do like this: http://jsfiddle.net/QUCWe/

查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
5楼-- · 2020-02-11 03:09

You can pass a function as an argument, which will be called when the end has reached. I've just written a jQuery plugin for this purpose. Fiddle: http://jsfiddle.net/kKaWZ/

(function($){
    $.fn.downAndUp = function(time, repeat){
        var elem = this;
        (function dap(){
            elem.animate({scrollTop:elem.outerHeight()}, time, function(){
                elem.animate({scrollTop:0}, time, function(){
                    if(--repeat) dap();
                });
            });
        })();
    }
})(jQuery);
$("html").downAndUp(2000, 5)
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
6楼-- · 2020-02-11 03:14

Be aware that the suggested infinite scroll JSFiddle code will work in firefox however will not work in Chrome/Chromium without a valid 

<!DOCTYPE html>

tag at the start of ones page. Per This Answer

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)