返回顶部逻辑很简单,功能点分为:
- 页面第一屏内不展示返回顶部的图标,超过第一屏时展示图标;
- 点击返回顶部图标时页面流畅地返回顶部。
HTML文件部分:
<!DOCTYPE html>
<html>
<head>
<title>返回顶部</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p>向下拖动滚动条(进入第二屏),右下角会出现“返回顶部”图标</p>
<img src="images/totop.png" id="toTop"/>
<script style="text/javascript" src="js/lee_top.js"></script>
</body>
</html>
CSS文件部分:
body{ height:4000px; } #toTop{ position:fixed; right:30px; bottom:40px; cursor:pointer; display:none; }
PS:因为CSS部分用到了"fixed",这个例子没有做IE6的兼容性处理(我相信大多数前端工程师都不喜欢IE6,),不过如果需要探讨此例的IE6兼容性,可以私信探讨^_^ 或者查看最新代码地址:https://github.com/tjuking/lee-goToTop
JS文件部分:
(function(){ var scrollEle = clientEle = document.documentElement, toTopBtn = document.getElementById("toTop"), compatMode = document.compatMode, isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true; //不同渲染模式以及Chrome的预处理 if(compatMode === "BackCompat" || isChrome){ scrollEle = document.body; } if(compatMode === "BackCompat"){ clientEle = document.body; } //返回顶部按钮的点击响应(注册函数),时间间隔和高度缩减率可以调节 toTopBtn.onclick = function(){ var moveInterval = setInterval(moveScroll, 10); function moveScroll(){ setScrollTop(getScrollTop() / 1.2); if(getScrollTop() === 0){ clearInterval(moveInterval); } } } //滚动时判断是否显示返回顶部按钮(注册函数) window.onscroll = function(){ var display = toTopBtn.style.display; if(getScrollTop() > getClientHeight()){ if(display === "none" || display === ""){ toTopBtn.style.display = "block"; } }else{ if(display === "block" || display === ""){ toTopBtn.style.display = "none"; } } } //获取和设置scrollTop function getScrollTop(){ return scrollEle.scrollTop; } function setScrollTop(value){ scrollEle.scrollTop = value; } //获取当前网页的展示高度(第一屏高度),此处Chrome正常 function getClientHeight(){ return clientEle.clientHeight; } })();
如果返回顶部用jQuery实现需要考虑的东西就很少了,不过原生的Javascript能帮助我们更好的学习这门语言以及了解各浏览器的不同。
当然除了以上代码还需要去网上找一个漂亮的图标。