[不花钱站长]:从免费域名开始[0元] Oracle永久免费VPS[0元] VPS环境搭建免费脚本[0元] 秒变大盘挂载免费网盘[0元] 小白免费采集器1天500W[0元] CF免费DNS+CDN服务[0元]
[零基础网赚]:撸本站免费源码[0元] 网站强引免费蜘蛛法[0元] 图片视频文件免费存储[0元] 外链轻松发布免费友链[0元] 入坑免费教程学习源代码[0元] 网上百种+赚钱联盟推荐[?元]

↑↑VPS推荐网 WWW.VPS.COM.IN 稳定 便宜 免备案↑↑


您现在的位置是：首页 > 全球[VPS测评] >  JS访问顶部方法,便宜vps,访问顶部代码,VPS优惠,国外永久免费VPS

单独给网站添加访问网页顶部的代码实现方法

全球[VPS测评]来源：VPS推荐网点击：494
【性价之王】【线路之王】【价格之王】【配置之王】
【免费之王】【香港首推】【梯子之王】【独服之王】
单独给网站添加访问网页顶部的代码实现方法

一般我们遇到比较长页面的网站，会在右侧方加上访问顶部的小浮动按钮，我们可以点击后直接回到网页的首屏中，于是这类问题经常出现的时候蜗牛会收藏整理一个通用的代码脚本，在需要用到的时候直接贴进来使用。这里把我整理过来的方法一并记录到网站中，有需要的朋友可以选择。同时也方便我以后的再次复制。

第一、通用CSS文件

#gotop{ width:38px; height:36px; position:fixed; bottom:25px; right:10px; top:auto; display:block; cursor:pointer; background: url(images/topav.jpg) no-repeat}*html #gotop{ position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

通用css文件，我们可以修改一下对应的图片\\”images/topav.jpg\\”，我们准备准备一个箭头上的图片。

第二、添加页面脚本

<div style=\\\"display: none;\\\" id=\\\"gotop\\\"></div><script type=\\\'text/javascript\\\'> backTop=function (btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; var b=document.body; window.onscroll=set; btn.onclick=function (){ btn.style.display=\\\"none\\\"; window.onscroll=null; this.timer=setInterval(function(){ d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1); b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1); if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?\\\'block\\\':\\\"none\\\"} }; backTop(\\\'gotop\\\');</script>

这里，在我们的网站底部页面模板中添加代码，一般在footer.php模板中。

我们再实例中测试看看效果。

本文出处：蜗牛部落 » 单独给网站添加访问网页顶部的代码实现方法 | 欢迎分享（ 公众号：蜗牛玩运营 ）



猜你可能想看的VPS


转载请注明原文地址:http://140.238.13.167:12355/read-142849.html

下一篇       上一篇