首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >自动从上到下滚动页面,然后备份(并重复)

问自动从上到下滚动页面,然后备份(并重复)
EN

Stack Overflow用户
提问于 2011-11-13 04:15:24
回答 5查看 40.5K关注 0票数 10

我正在尝试弄清楚如何在页面加载时自动滚动到页面的底部(here已经对此进行了充分的描述),然后在到达页面底部时自动向上滚动。我可以找到自动滚动到页面底部,但我不知道如何识别何时在页面底部,以及如何在页面底部时向上滚动我会使用泛型Javascript (或JQuery)来做这件事。

提前感谢!

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-11-13 04:56:39

试试这个:http://jsfiddle.net/yjYJ4/

代码语言:javascript
复制
$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000, function() {
    $(this).animate({ scrollTop: 0 }, 1000);
});

你可以在这里全屏观看演示:http://jsfiddle.net/yjYJ4/embedded/result/

如果您想增加或降低速度,请更改数字"1000“。

在Chrome,Firefox和IE 6-9中运行良好。

编辑:

如果你需要永远重复它(不推荐...)您可以这样做:http://jsfiddle.net/QUCWe/

票数 14
EN

Stack Overflow用户

发布于 2014-11-10 22:53:02

下面是使用纯JavaScript的示例

​

代码语言: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>
代码语言:javascript
复制
<style type="text/css"> 

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

</style>
代码语言:javascript
复制
<div id="top">top</div>
<div id="bottom">bottom</div>

​

票数 5
EN

Stack Overflow用户

发布于 2011-11-13 04:46:19

您可以将函数作为参数传递,该参数将在到达末尾时被调用。我刚刚为此编写了一个jQuery插件。小提琴:

代码语言:javascript
复制
(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)
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8107251

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档