js+css实现“回到顶部”的几个关键点---Day10

随着网页信息量越来越多的增加，单纯的一屏很难将信息显示完全，就导致了需要拖动滚动条来进行滚动，而当滚到底部，发现前面有一个地方遗漏了，是不是特别沮丧的要慢慢“滚”回去呢，现代的界面是越来越长，而“回到顶部”的应用也越来越多。

这么多好看的“回到顶部图标”，如果不会用是不是太可惜了，现在我们就来分析下它实现中的关键点

1、“回到顶部”的放置

通常我们将“回到顶部”放到浏览器的右下角，但是不属于页面内部，所以我们对于浏览器的放置需要参考浏览器进行，这里我们想到的就是postion：fixed的应用了，fixed的应用通常与right、left、top和bottom同时应用的，这里我们对于属性加上postion：fixed；right：0px；bottom:0px;即可保持稳定在右下角；

2、“回到顶部”的实现

a、锚标记

相信这一个大部分都会应用，w3school中在html部分最基础的部分就简单的介绍到，并与链接进行了名称上的对比，这里就简单表述下应用了

<a name="top" id="top"></a>

<a href="#top" target="_self">回到顶部</a>

但是这种方式的显示效果太差，友好性不够，所以我们就又想到了其他方法

2、js实现动态回到顶部

这里我们对于功能的实现，主要依赖滚动栏进行操作的，简单的写的话

function back(){

document.body.scrollTop=0;

};

或者说实现动态效果

function back(){
        window.scrollBy(0,-10);
	var timer=setTimeout('back()',100);
	if(document.body.scrollTop==0)clearTimeout(timer);
}

3、总结
写到这里我们就可以在不考虑兼容的情况下，简单的实现“回到顶部”的功能了，我们来回想下有哪些关键点呢

a、postion：fixed的应用

b、锚标记

c、document.body.scrollTop或者document.getElementBy("body")[0]

d、setTimeOut() clearTimeOut()或者setInterVal()及clearInterVal()

快来简单实现下吧