JavaScript之返回顶部

为了弄这个Hexo，今天又是坐在电脑面前待了一天( ⊙ o ⊙ )，老是出问题，在百度上也试验了很多方法，还是没弄好，诶。。。身心疲惫甚是乏累啊~~~

算了，这个Hexo先不弄，还是安分点吧，在Hexo上感觉浪费了很多的时间，毕竟Hexo对我来说还是高大尚的东西，适可而止。

好了！我还是好好搞自己基础的东西吧，做自己该做的事就可以了。

我们回到这章话题，我们都知道都看到过，很多页面都会有“返回顶部”，方便快捷。

最简单的原理就是应用了<a>标签，我们写“底部”和“顶部”两个标签：

scrollHeight:表示滚动条需要滚动的高度，即内部div

scrollTop: 表示滚动条滚动的高度，可能大于外部div

也就是说scrollDiv的高度+scrollTop滚动的最大高度=scrollHeight

<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('body')[0].scrollTop=document.getElementsByTagName('body')[0].scrollHeight;">到页面底部</a>
<div style="height:2000px;"></div>
<a href="javascript:void(0);" onclick="javascript:document.getElementsByTagName('body')[0].scrollTop=0;">返回页面顶部</a>

方法：

$(".class").click(function(){
$(".class2").slideDown(300);
$("html,body").animate({"scrollTop":$(document).scrollTop()+100},350);   //注：100参数一定要大于.class2元素的高度
});

我们来看看运行效果：

到页面底部

 

返回页面顶部