常用返回顶部几种方法:如有(#)锚点标记、原生Js的scrollTo()、scrollBy()慢速滚动返回顶部及现在常用的jquery返回顶部
一、使用锚点标记
此方法最简单,只需在body下放个隐藏的锚点标记,内容如下:
<a name="top" id="top">找我</a>
然后,在网页底部放一个访问链接即可:
<a href="#top" target="_self">返回顶部</a>
不过,此方法效果是一次直接跳到顶部(没有过渡效果),而且URL地址栏会显示个#top,追求完美的可使用下面方法。
二、使用JS scrollTo函数
javascript scroll函数(scrollBy scrollTo)是用来滚动页面到指定位置,格式定义如下:
2.1.1 scrollTo方法说明
■scrollTo(xpos, ypos)
xpos,ypos:分别指水平和垂直坐标,例如scrollTo(0,0),表示滚动到页面顶部
2.1.2 使用示例:
<a href="javascript:scrollTo(0,0);">返回顶部</a>
2.2.1 scrollBy方法说明
■scrollBy(xnum, ynum)
xnum,ynum:分别指水平、垂直滚动多少像素,正值表示向右或向下滚动,负值则表示向左或向上滚动
2.2.2 使用示例:
每次只滚动定量像素,整体看起来有点滚动效果,代码如下:
var delay = 0;
function returnTop() {
window.scrollBy(0, -100); // 只向上滚动100px
if(document.body.scrollTop > 0) {
delay= setTimeout('returnTop()', 50);
}
}
scrollBy函数第二个参数我设了-100,越大(比如-10)滚动越慢,越小滚动越快,启动滚动只需在页面底部加个链接:
<a href="javascript:returnTop();">返回顶部</a>
三、JQuery实现返回顶部功能
首先需要在顶部添加如下html元素:
<div id="back-to-top"><a href="#top">返回顶部</a></div>
其中a标签指向锚点top,可以在顶部添加一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。
我们还需要用js控制返回顶部按钮,代码如下:
$(function () {
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({scrollTop: 0}, 1000);
return false;
});
});
});
四、设置属性
还有另外一种直接设置根节点属性(scrollTop )
// 4.1 直接修改属性
window.pageYOffset = document.documentElement.scrollTop = document.body.scrollTop = 0