码迷,mamicode.com
首页 > Web开发 > 详细

学习笔记--jquery 页面滚动返回顶部

时间:2015-06-02 15:00:26      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

 

在html页面加入<meta name="toTop" content="true">即可.

$(function () {
    if ($("meta[name=toTop]").attr("content") == "true") {
      $("<div id=‘toTop‘><img src=‘1.png‘></div>").appendTo(‘body‘);
      $("#toTop").css({
        width: ‘50px‘,
        height: ‘50px‘,
        bottom: ‘10px‘,
        right: ‘15px‘,
        position: ‘fixed‘,
        cursor: ‘pointer‘,
        zIndex: ‘999999‘
      });
      if ($(this).scrollTop() == 0) {
        $("#toTop").hide();
      }
      $(window).scroll(function (event) {
        /* Act on the event */
        if ($(this).scrollTop() == 0) {
          $("#toTop").hide();
        }
        if ($(this).scrollTop() != 0) {
          $("#toTop").show();
        }
      });
      $("#toTop").click(function (event) {
        /* Act on the event */
        $("html,body").animate({
              scrollTop: "0px"
            },
            666
        )
      });
    }
  });

 

学习笔记--jquery 页面滚动返回顶部

标签:

原文地址:http://www.cnblogs.com/mrxia/p/4546212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!