WordPress使用JQuery实现上下滑动

现在的网站一般都会有返回顶部/上下滑动的功能，尽管键盘上的Home/End键也可以实现相应的功能。

记得目前这种当页面下滑到非顶部后右下角出现返回顶部图片的做法是在大概2年前开始流行的，短短一段时间几乎所有网站都拥有了这个功能，目前来看这个功能已经形成了不小的用户粘度。每隔一段时间就会在论坛上看到有人找不到discuz!的top功能来提建议的。

本文将讲解一种在WordPress中实现上下滑动的方法。

本文实现方法参考了小可博客的做法和图片，进行了一定的修改，将css文件精简为一个文件，去除了重复代码。

这种使用JQuery实现上下滑动的方法，除了返回顶/底部外，还可以在文章页面定位到评论处，当然如果可以的话，你也可以加入像网易新闻页面那样的分享功能。

1.将updown.gif放到主题目录的图片文件夹下

制作一个上下滑动的图片，或者使用下面压缩包中的图片，命名为updown.gif，放到主题目录下的图片文件夹（如：images或img）。

2.将updown.css放到主题根目录下

#updown {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: 135px;
  display:block;
}
#up {
  background: url(images/updown.gif) no-repeat;
  position: relative;
  cursor: pointer;
  height: 42px;
  width: 32px;
  margin: 10px 0;
}
#comt {
  background: url(images/updown.gif) no-repeat center -45px;
  position: relative;
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin: 10px 0;
}
#down {
  background: url(images/updown.gif) no-repeat center -78px;
  position: relative;
  cursor: pointer;
  height: 42px;
  width: 32px;
  margin: 10px 0;
}

#updown {

position: absolute;

top: 40%;

left: 50%;

margin-left: 135px;

display:block;

}

#up {

background: url(images/updown.gif) no-repeat;

position: relative;

cursor: pointer;

height: 42px;

width: 32px;

margin: 10px 0;

}

#comt {

background: url(images/updown.gif) no-repeat center -45px;

position: relative;

cursor: pointer;

height: 32px;

width: 32px;

margin: 10px 0;

}

#down {

background: url(images/updown.gif) no-repeat center -78px;

position: relative;

cursor: pointer;

height: 42px;

width: 32px;

margin: 10px 0;

}

上面的代码即为updown.css的代码，你可以根据自己的图片和主题调整各个位置元素的值，如果使用压缩包中的图片，只需要修改#updown中的margin-left的数值，该数值0为正中，正数为右侧，负数为左侧。

3.修改主题模板的header.php文件

在主题模板的header.php文件中，找到，在其前面添加CSS引用和JQuery代码：

<!-- UPDOWN START -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/updown.css" type="text/css" />

<script type="text/javascript">

  jQuery(document).ready(function($){
  var s= $('#updown').offset().top;
  $(window).scroll(function (){$("#updown").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
  $('#up').click(function(){$body.animate({scrollTop: '0px'}, 400);});
  $('#down').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
  <?php if (is_single()) { ?>
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
  <?php } else { ?>
$("#comt").hide();
  <?php } ?>
});

</script>
<!-- UPDOWN END -->

jQuery(document).ready(function($){

var s= $('#updown').offset().top;

$(window).scroll(function (){$("#updown").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});

$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

$('#up').click(function(){$body.animate({scrollTop: '0px'}, 400);});

$('#down').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});

<?php if (is_single()) { ?>

$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});

<?php } else { ?>

$("#comt").hide();

<?php } ?>

});

</script>

4.修改主题footer.php文件

在主题footer.php文件的之前，添加如下代码：

<!-- UPDOWN START -->
<div id="updown">
  <div id="up" title="去顶部!"></div>
  <div id="comt" title="我要评论!"></div>
  <div id="down" title="去底部!"></div>
</div>
<!-- UPDOWN END -->