JS实现返回顶部的两种方法(固定/跟随)

继续给emlog博客主题添加返回顶部功能，以便读者快速返回放有导航的顶部。

代码是从太平洋电脑网提取的两个javascript回到页面顶部代码，稍作修改。

---

html代码

<style type="text/css"> .toTop-btn{display:none;width:30px;height:30px;position:fixed;bottom:55px;right:5px;cursor:pointer;z-index:10;} .toTop-btn::before{content:'';position:absolute;left:0;top:0;width:30px;height:30px;background:#333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAMFBMVEUAAAAREREiIiIzMzNERERVVVVmZmZ3d3eJiYmampqrq6u8vLzNzc3///////8PDw/fWdWlAAAAEHRSTlP///////////////////8A4CNdGQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAF9JREFUKM/t00sOwCAIBFDuf0cyJzH2IyiIadVuy/JtYCaB8mBoHhOHwQJubE8YIHPEcyECXmt7vC9Dh+VCjxIBDjWMxZoVBlvuhqYUVLQVKbr2IOjbfMKX43/M9O0RDuq09vv7zSGlAAAAAElFTkSuQmCC) no-repeat 5px 5px;background-size:20px;border-radius:3px;} </style> <script type="text/javascript"> var footFn = { getId: function(id) { return document.getElementById(id); }, getElem: function(selectors){ return document.querySelector(selectors); }, getElems: function(selectors){ return document.querySelectorAll(selectors); }, show: function(obj) { obj.style.display = "block"; }, hide: function(obj) { obj.style.display = "none"; } }; /*返回顶部*/ (function() { window.addEventListener("scroll", function() { if (document.documentElement.scrollTop + document.body.scrollTop > 100) { footFn.show(footFn.getElem(".toTop-btn")); } else { footFn.hide(footFn.getElem(".toTop-btn")); } }, false); })(); </script> <div class="toTop-btn" title="回顶部" onclick="window.scrollTo(0, 0);"></div>

---

一，固定放在网页底部：

<div class="btn-top"><a href="javascript:void(0)" title="回顶部" onclick="window.scrollTo(0,0);">回到顶部</a></div>

将以上html代码放在网页底部位置，如emlog模板的footer.php

---

二，固定在浏览器窗口右下角位置，随页面滚动，且滚动一定程度才出现返回顶部：

CSS代码，emlog博客可以放在模板的main.css里：

.toTop-btn{
display:none;width:30px;height:30px;position:fixed;bottom:55px;right:5px;cursor:pointer;z-index:10;
} 
.toTop-btn::before{
content:'';position:absolute;left:0;top:0;width:30px;height:30px;background:#333 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAMFBMVEUAAAAREREiIiIzMzNERERVVVVmZmZ3d3eJiYmampqrq6u8vLzNzc3///////8PDw/fWdWlAAAAEHRSTlP///////////////////8A4CNdGQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAF9JREFUKM/t00sOwCAIBFDuf0cyJzH2IyiIadVuy/JtYCaB8mBoHhOHwQJubE8YIHPEcyECXmt7vC9Dh+VCjxIBDjWMxZoVBlvuhqYUVLQVKbr2IOjbfMKX43/M9O0RDuq09vv7zSGlAAAAAElFTkSuQmCC) no-repeat 5px 5px;background-size:20px;border-radius:3px;}

修改 .toTop-btn按钮大小：
把css部分 .toTop-btn的width:30px;height:30px;和.toTop-btn::before的background-size:20px;将这三个数值在原数值上，同时增加或减少相同数值。

---

相应的javascript代码(已用html调用)：

<script type="text/javascript"> 
var footFn = {
getId: function(id) {
return document.getElementById(id);
},
getElem: function(selectors){
return document.querySelector(selectors);
},
getElems: function(selectors){
return document.querySelectorAll(selectors);
},
show: function(obj) { 
obj.style.display = "block";
},
hide: function(obj) {
obj.style.display = "none";
}
}; 
/*返回顶部*/
(function(){
window.addEventListener("scroll", function(){
if (document.documentElement.scrollTop + document.body.scrollTop > 100){ 
footFn.show(footFn.getElem(".toTop-btn"));
}
else{
footFn.hide(footFn.getElem(".toTop-btn")); } }, false); })();
</script>

代码if (document.documentElement.scrollTop + document.body.scrollTop > 100)中的100表示浏览器滚动条与页面顶部的距离，修改其数值可以改变滚动页面出现返回顶部图标出现的页面位置，即滚动页面到多少才出现按钮。

---

起主要作用的回到顶部代码：

<div class="toTop-btn" title="回顶部" onclick="window.scrollTo(0, 0);"></div>