wordpress博客添加返回顶部小火箭

2018年1月28日20:57:04 发表评论 131

begin主题这侧边好多功能是鸡肋,返回顶部、到达底部,简体繁体转换等,我用的最多的就是返回顶部,所以索性就把这个主题的侧边功能栏全部去掉,自己加下返回顶部的小火箭图片,美观又好用。

wordpress博客添加返回顶部小火箭

你可以打开这两个链接下载这两个小火箭素材,静态小火箭动态小火箭.

一、返回顶部代码

我用的是jquery,因为我的博客加载了jquery,不用白不用,其实用原生js也很方便,具体的代码如下:

  1. // HTML代码
  2. <ul id="scroll">
  3.     <img class="go-top" src="http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll.png" alt="返回顶部">
  4. </ul>
  5. // CSS代码
  6. #scroll {
  7.     width: 32px;
  8.     float: right;
  9.     position: fixed;
  10.     right: 100px;
  11.     bottom: 50px;
  12.     z-index: 9999;
  13. }
  14. #scroll img{
  15.     transform: scale(0.5);
  16.     cursor: pointer;
  17. }
  18. // JS代码
  19. $(window).scroll(function() {
  20.     if($(window).scrollTop() >= 100){
  21.         $('.go-top').fadeIn(300);
  22.     }else{
  23.         $('.go-top').fadeOut(300);
  24.     }
  25. });
  26. $('.go-top').click(function(){
  27. $('html,body').animate({scrollTop: '0px'}, 800);});
  28. $('.go-top').mouseover(function() {
  29.     $('.go-top').attr('src', 'http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll2.gif');
  30. })
  31. $('.go-top').mouseout(function() {
  32.     $('.go-top').attr('src', 'http://www.zcbboke.com/wp-content/themes/begin5.2/img/scroll.png');
  33. })

加载图片我使用的是绝对路径,如果你不想下载这两张图片素材,也可以直接引用我网站的。

二、begin主题加入返回顶部代码

下面我以begin主题为例,教下如何放在自己的wordpress博客中。

  • begin侧边滚动栏是在主题目录下template\scroll.php中(复制上面HTML代码)
  • 在主题目录下的style.css中搜索#scroll就可以找到对应的样式(复制CSS代码)
  • begin原滚动栏的js在js\script.js中,一样搜索就可以找到,删除原来的(复制上面的jquery代码)

 

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: