欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

推荐一款容易的wordpress返回顶部的功能

企业模板

大家用wordpress来 做站都会遇见页面内容比较长的时候,上下拖拉页面实在麻烦,这个时候就需要一个wordpress返回顶部的功能了。网上有关课程也一大堆,又是js脚本 啊,又是JQuery啊什么的,太麻烦了,而今天推荐的是没js调用的,直接加个样式,再在底部加个代码就完事了,下面将此课程推荐给大伙!

1. 在style.css中添加如下代码:

#goTOP{width:38px;height:36px;position:fixed;bottom:25px;right:10px;TOP:auto;display:block;cursor:pointer;background:url(images/goTOP.gif)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)));}

其中,bottom和right属性可以控制按钮图片在右下角的地方,background属性可以修改返回顶部的图片。

2. 在footer.php中添加如下代码:

!--返回顶部--divstyle="display:none;"id="goTOP"/divscripttype='text/javascript'backTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;varb=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);};functionset(){btn.style.display=(d.scrollTop+b.scrollTop100)?'block':"none"}};backTop('goTOP');/script!--返回顶部END--

3. 添加返回顶部按钮图片 可以选择自己喜欢的

推荐一款容易的wordpress返回顶部的功能推荐一款容易的wordpress返回顶部的功能推荐一款容易的wordpress返回顶部的功能推荐一款容易的wordpress返回顶部的功能

将图片保存到主题文件夹下的images里,图片名叫goTOP.gif

课程转自:http://www.jiangyoumei.com/jcandcj/3292.html


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:互联网 关注: 时间:2021-04-27 17:29
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/wordpress/jiaocheng/20210427/12252.html
►凡本站提供教程均已验证教程的准确性。
►为提高用户在织梦后台添加栏目的灵活性(可随意添加/删除栏目),并保持(管理后台添加/删除栏目)与前端网站栏目的一致,本站模板中栏目均未固定,用户直接搜索typeid=''并替换''中的数字为所需栏目id即可。
►本站提供各种类型织梦模板!希望在这里找到喜欢的。下载本站模板,用户直接替换相关文字和图片即可。
►本站仅提供织梦模板即(DEDE模板),(除另外说明)均不带织梦安装程序及数据,用户直接覆盖默认模板即可。
►本站所有资源(包括源码、模板、插件等)仅供学习与参考,请勿用于商业用途。
►如有其他问题,请加网站客服QQ(375750496)进行交流。
相关织梦教程
在线客服

织梦模板 整站模板 新手教程 使用技巧