梓悦生活

  • 🍟首页
  • 🍪免费资源
  • 🍓Wordpress
  • 🍋琐碎生活
  • 🍘关于
关注周围的人或事,体验人生历程
  1. 首页
  2. Wordpress
  3. 正文

WordPress中添加返回顶部功能

2016/09/20 3513点热度 0人点赞 1条评论

tax-468440_960_720
对于页面内容比较长的网站,返回顶部的功能是比较需要的。网上的实现方法也不少,包括用百度新闻中的JS脚本的,还有用JQuery的,现在分享如下。

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

#gotop{
	width:38px;
	height:36px;
	position:fixed;
	bottom:25px;
	right:10px;
	top:auto;
	display:block;
	cursor:pointer;
	background: url(myimages/top.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中添加如下代码


其中,主要解决了Chrome浏览器不识别document.documentElement.scrollTop的问题,从网上找了相关的处理方法,说是使用

document.documentElement.scrollTop+document.body.scrollTop

来解决问题。然后我修改了代码,具体是第7、13、14、15、18行,完成了对Chrome浏览器的兼容。

3. 添加返回顶部按钮图片,网上搜索各式各样,可以用自己的图片替换。如第一步中的background属性,把top.gif放到主题目录中存放图片的目录下。

通过对第二节的第18行代码中

d.scrollTop+b.scrollTop>100

部分进行修改,可以实现滚动屏幕到达某个位置之后再显示向上按钮,如果去掉“>100”之后,则是在屏幕滚动时立刻显示向上按钮。

另一种方法,就是目前本站用的:可变透明度的jQuery响应式返回顶部代码
jQuery可变透明度返回顶部代码,如果向下滚动超过1200像素,按钮的透明度会下降,减少视觉干扰,更便于浏览内容主体,非常贴心的用户体验,兼容主流浏览器。
使用方法:
1、在head区域引入样式表文件sucaijiayuan.css

.cd-top {
  display: inline-block;
  height: 30px;
  width: 30px;
  position: fixed;
  bottom: 36px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(112, 165, 203, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 56px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 40px;
    width: 40px;
    right: 30px;
    bottom: 46px;
  }
}

2、在head区域引入jquery.min.js和sucaijiayuan.js,注意引入的先后顺序。sucaijiayuan.js代码如下:

jQuery(document).ready(function($){
	// browser window scroll (in pixels) after which the "back to top" link is shown
	var offset = 300,
		//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
		offset_opacity = 1200,
		//duration of the top scrolling animation (in ms)
		scroll_top_duration = 700,
		//grab the "back to top" link
		$back_to_top = $('.cd-top');

	//hide or show the "back to top" link
	$(window).scroll(function(){
		( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
		if( $(this).scrollTop() > offset_opacity ) { 
			$back_to_top.addClass('cd-fade-out');
		}
	});
	//www.sucaijiayuan.com
	//smooth scroll to top
	$back_to_top.on('click', function(event){
		event.preventDefault();
		$('body,html').animate({
			scrollTop: 0 ,
		 	}, scroll_top_duration
		);
	});

});

3、在你的网页中前加入如下代码:

Top

参考来源:http://www.sucaijiayuan.com/Js/top/1081.html

标签: wordpress
最后更新:2016/09/20

Meteor

关注周围的人或事,体验人生历程!

点赞
< 上一篇
下一篇 >

文章评论

  • 三五营销

    仔细瞧瞧再说!

    2016/09/28
    回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    Gost隧道一键脚本使用说明 接码平台推荐,可接收短信验证码完成验证 Debian源更新报错解决方法 Linux调整文件系统大小的命令:resize2fs 哪吒监控面板搭建教程 将Azure机器配置的静态IP修改为动态IP地址
    将Azure机器配置的静态IP修改为动态IP地址Vultr 推出免费云主机,用于鼓励全球创新Debian源更新报错解决方法Cloudflare WARP 一键安装脚本 使用教程HostPanel开源免费主机管理面板谷歌将替换Chrome 117版本中的挂锁图标
    PHP版本是不是越高越好 Wordpress默认链接标题由书签修改为友情链接 美国247zilla.Com的100MB云主机申请图文教程 Linux CentOS6环境下MySQL5.1升级至MySQL5.5版本过程 Inavit免费PHP和Asp.net空间数据库MSSQL 2008和MysqL空间250MB 采用DNSPOD安装免费Let's Encrypt证书
    最近评论
    Meteor 发布于 2 个月前(10月20日) 哈哈,友链一直都在,后来换了主题后忘记修改显示数量了,现在恢复好了。
    弋牧 发布于 2 个月前(10月12日) 这里已经看不到我的友连了吗?
    彩鸽 发布于 2 个月前(10月04日) 写的不错
    B2B海外商城系统 发布于 3 个月前(09月21日) 感谢分享
    上海网站建设 发布于 5 个月前(07月11日) 感谢分享
    标签聚合
    域名解析 VPS wordpress Linux Linux技巧 活动 虚拟主机 技巧
    友情链接
    • Anders Norén
    • Appurse
    • CSS参考手册
    • DeeTeam-迪提姆
    • Fatesinger
    • FreeSSL
    • gandi
    • Internetbs
    • LogoMaker
    • Meteor's Blog

    COPYRIGHT © 2023 梓悦生活. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang