现在的位置: 首页 > wordpress > 正文

给 WordPress 主题添加回到顶部功能

2018年07月24日 wordpress ⁄ 共 1142字 ⁄ 字号 暂无评论

在瀑布流风格的网站开始流行之后,很多网站都出现了一个回到顶部的功能,对于瀑布流布局的网站来讲,这可以说是必须要有的一个功能,因为网站下拉了很长之后,需要返回顶部的时候,如果拖着滚动条去拉,那种麻烦相信大家都体验过。

对于非瀑布流网站来说,增加这种效果必要性其实不大,除非你的网站上文章很长,用户需要看好几屏才能看完。需不需要是基于用户体验上的考虑,咱在这里先按下不说,下面来看一下怎么通过一段 JavaScript 代码很简单的给网站添加一个回到顶部的按钮吧。

首先把这段代码添加到网站的 JavaScript 文件或者直接添加到 footer.php 文件中。

jQuery(document).ready(function($){
	if ($(window).scrollTop() != "0")
		$(".scroll-to-top").fadeIn(1200) //如果距离顶部的距离不为0,显示.scroll-to-top
	var scrollDiv = $(".scroll-to-top");
	$(window).scroll(function()
	{
		if ($(window).scrollTop() == "0")
			$(scrollDiv).fadeOut(350)//如果距离顶部的距离为0,隐藏scrollDiv
		else
			$(scrollDiv).fadeIn(1200)//其他情况下,显示scrollDiv
	});
	$(".scroll-to-top").click(function(){
		$("html, body").animate({
			scrollTop: 0 //点击按钮,滚动回到顶部
		}, 600)
	})

});

然后是 CSS 代码

/* 回顶部 */
.scroll-to-top {
  display: none;
  width: 70px;
  height: 32px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  background-color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  bottom: 2%;
  position: fixed;
  right: 15px;
  z-index: 999;
}
.scroll-to-top:hover {
  opacity: .8;
}

最后,把下面的一段代码加到 footer.php 文件里即可。

<div class="scroll-to-top" style="display: block;">回到顶部</div>

只有这几段代码,回到顶部的功能就添加完毕了,测试了一下,效果非常好,其实用户体验和前端设计很多地方拼得就是细节,细节做到了,用户用着爽了,用户体验自然就好了。关于以上代码,有什么问题,欢迎在留言中提出。

博客主机

抱歉!评论已关闭.

博客主机

×