古老版html一行链接返回顶部
上古时代的互联网，返回顶部代码就是html中的一行a标签。如下：
<a href="#top">返回顶部</a>
然到了如今这个强调动效和交互体验的前端发达时代，如果点击上边这个返回顶部，蹭的一下就直接跳到顶部，那显得有点儿太生硬和直接了，有没有用户体验更好一点儿的返回顶部代码呢？
当然是有。要不javascript与jquery哪来的用武之地。
纯javascript 平滑滚动到页面顶部
html:
<body id="top"> <a href="#top" onclick="scrollToTop();return false">Back to Top ↑</a>
javascript:
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
window.scrollBy(0,-50);
timeOut=setTimeout('scrollToTop()',10);
}
else clearTimeout(timeOut);
}jquery回到页面顶部(自动显示或隐藏)代码
此外嘛，就是用jquery来搞定。以下是一个示例。
html:
<p id="top"> <a href="#top"><span></span>返回顶部</a> </p>
jquery:
<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(e) {
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头
$("#top").fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示
}
else
{
$("#top").fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失
}
});
//当点击跳转链接后，回到页面顶部位置
$("#top").click(function(){
$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部
return false;
});
});
});
</script>jQuery“返回顶部”滑动过度效果
利用jQuery，直接在网站底部文件加代码：
<a href="#" id="top"> 返 回 顶 部 </a>
CSS代码，使用了fixed让对象固定于浏览器窗口：
#top{position:fixed;bottom:0;right:10px;}
<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
jQuery代码，注意正常使用的几个条件：
$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});当然，还有其它更有趣、好玩、实用的返回顶部代码，前端无秘密，只要发现别的网站有更漂亮的、新颖的，直接扒下来就好。 不会扒，那就去好好学习javascript和jquery吧，至少得入门！
