jQuery设置滚动条自动移动到页面底部

jQuery设置滚动条自动移动到页面底部

我们知道,jQuery有个scrollTop的方法,可以将滚动条移动到指定位置,它的语法是类似这样的:

$("div.jqDemo").scrollTop(300);

下面我们举一个例子来说明。


将滚动条移动到整个页面的底部

要将滚动条移动到页面(document)的底部,只需要将参数设置为页面高度即可:

var dh = $(document).height();
$(document).scrollTop(dh);

PS:要是该参数大于页面高度时,页面滚动条会有回退到页面高度的动作。

至此,jQuery设置滚动条自动移动到页面底部的问题已经解决了。


延伸研究:用jQuery将页面滚动条自动移动到与某元素平齐

将页面滚动条移动到与某元素一个水平线,其中一种办法是可以用链接命名描记来实现,在此说的是采用jQuery的办法。

// 获取匹配元素jQTestDiv在当前视口的相对偏移
var pos = $("#jQTestDiv").offset();
// 将网页文档滚动条自动定位到该元素顶部相对偏移
$(document).scrollTop(pos.top);


PS:配图与内容没有任何的关系,可做设计灵感之用。


5

相关文章