我正在尝试弄清楚如何在页面加载时自动滚动到页面的底部(here已经对此进行了充分的描述),然后在到达页面底部时自动向上滚动。我可以找到自动滚动到页面底部,但我不知道如何识别何时在页面底部,以及如何在页面底部时向上滚动我会使用泛型Javascript (或JQuery)来做这件事。
提前感谢!
发布于 2011-11-13 04:56:39
试试这个:http://jsfiddle.net/yjYJ4/
$('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/
发布于 2014-11-10 22:53:02
下面是使用纯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>
发布于 2011-11-13 04:46:19
您可以将函数作为参数传递,该参数将在到达末尾时被调用。我刚刚为此编写了一个jQuery插件。小提琴:
(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)https://stackoverflow.com/questions/8107251
复制相似问题