返回顶部的几种方法总结
Posted 爱博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了返回顶部的几种方法总结相关的知识，希望对你有一定的参考价值。
1.锚点
但是唯一的缺点就是样式不怎么样，会显示这个锚标记。
<a name="top" id="top"></a>
放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。
页面底部放置：
<a href="#top"target="_self">返回顶部</a>
二、使用Javascript Scroll函数返回顶部
scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：
方式1（推荐：简单方便）：
<ahref="javascript:scroll(0,0)">返回顶部</a>
scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。
方式2（注重效果：缓慢向上）：
本方式是渐进式返回顶部，要好看一些，代码如下：scrollBy函数第二个参数我设了-100，越大（比如-10）滚动越慢，越小滚动越快
function pageScroll() {
window.scrollBy(0,-10);//Only for y vertical-axis
scrolldelay=setTimeout(‘pageScroll()‘,100);}
<a href="pageScroll();">返回顶部</a> 或者<a href="javascript:returnTop();">返回顶部</a>
这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。
if(document.documentElement.scrollTop==0)
clearTimeout(scrolldelay);
方式3
document.documentElement.scrollTop = document.body.scrollTop =0;
以上是关于返回顶部的几种方法总结的主要内容，如果未能解决你的问题，请参考以下文章