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

下面是博主笑忘书太平洋电脑网提取的两个javascript回到页面顶部代码,稍作修改。

一,固定放在网页底部:

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

相应的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>

演示效果:http://xiaows.com/demo/toTop.html

返回顶部 笑忘书言

更多代码以后会分享

全文完