效果特别好|给WordPress添加回到顶部功能

效果特别好|给WordPress添加回到顶部功能

前言:

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

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

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

  1. jQuery(document).ready(function($){
  2.     if ($(window).scrollTop() != “0”)
  3.         $(“.scroll-to-top”).fadeIn(1200) //如果距离顶部的距离不为0,显示.scroll-to-top
  4.     var scrollDiv = $(“.scroll-to-top”);
  5.     $(window).scroll(function()
  6.     {
  7.         if ($(window).scrollTop() == “0”)
  8.             $(scrollDiv).fadeOut(350)//如果距离顶部的距离为0,隐藏scrollDiv
  9.         else
  10.             $(scrollDiv).fadeIn(1200)//其他情况下,显示scrollDiv
  11.     });
  12.     $(“.scroll-to-top”).click(function(){
  13.         $(“html, body”).animate({
  14.             scrollTop: 0 //点击按钮,滚动回到顶部
  15.         }, 600)
  16.     })
  17. });

然后是CSS代码

  1. /* 回顶部 */
  2. .scroll-to-top {
  3.   display: none;
  4.   width: 70px;
  5.   height: 32px;
  6.   line-height: 32px;
  7.   color: #fff;
  8.   text-align: center;
  9.   background-color: #333;
  10.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  11.   cursor: pointer;
  12.   bottom: 2%;
  13.   position: fixed;
  14.   right: 15px;
  15.   z-index: 999;
  16. }
  17. .scroll-to-top:hover {
  18.   opacity: .8;
  19. }

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

  1. <div class=“scroll-to-top” style=“display: block;”>回到顶部</div>

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

写在后面:

我就喜欢我吹牛逼的样子,哈哈哈哈。

本文参考于 https://www.wpzhiku.com/add-scroll-to-top-button-towordpress/  ,若有任何来源问题,请联系QQ:1516677079 及时更正。

最有意思的设计站点


最好的UI素材库

我们极力推荐: