jQuery实现返回顶部功能

整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图

jQuery实现返回顶部功能 jQuery实现返回顶部功能

--------------------------------------分割线 --------------------------------------

--------------------------------------分割线 --------------------------------------

第一种实现

一、JSP或HTML(主体结构)

在body中添加

<body id="top">
<p id="back-to-top"><a href="#top"><span></span></a></p>
</body>

二、CSS(样式化)

<style>
 p#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
 }
 
 p#back-to-top a {
  text-align: center;
  text-decoration: none;
  color: #d1d1d1;
  display: block;
  width: 50px;
    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
  -moz-transition: color 1s;
  -webkit-transition: color 1s;
  -o-transition: color 1s;
 }
 p#back-to-top a:hover {
  color: #979797;
 }
 p#back-to-top a span {
  background: #d1d1d1 url(/img/back_to_top.png) no-repeat center center;
  border-radius: 6px;
  display: block;
  height: 50px;
  width: 50px;
  margin-bottom: 5px;
      /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
  -moz-transition: background 1s;
  -webkit-transition: background 1s;
  -o-transition: background 1s;
 }
 
 #back-to-top a:hover span {
  background: #979797 url(/img/back_to_top.png) no-repeat center center;
 }
</style>

图片自己网上找资源

三、jQuery(动态效果)

<script>
$(document).ready(function() {
    //首先将#back-to-top隐藏
    $("#back-to-top").hide();

    //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
    $(function() {
        $(window).scroll(function() {
            if ($(window).scrollTop() > 100) {
                $("#back-to-top").fadeIn(1500);
            }
            else {
                $("#back-to-top").fadeOut(1500);
            }
        });
        //当点击跳转链接后,回到页面顶部位置
        $("#back-to-top").click(function() {
            $('body,html').animate({
                scrollTop: 0
            },
            500);
            return false;
        });
    });
});
</script>

相关推荐