jquery实现点击页面回到顶部

 更新时间:2016年11月23日 11:00:34   作者:玩世不恭、  
本篇文章主要是对点击回到页面顶部或是首页的功能进行了介绍,这是页面常用到的效果,需要的朋友可以过来参考下

a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置

b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔【有时间就写】

1)首先我们写好DOM结构、写好CSS样式表

/* HTML */
<div style="width: 100%; height: 3000px;">
  <!--这个带ID的p标签,叫做锚标记,放在页面顶部位置,目的:防止代码不起作用时(比如类库版本浏览器不支持),你点击回到顶部,仍然可以通过锚标记实现-->
  <p id="pageTop"></p>
  <section id="top_sec" class="top_sec">
   <a href="#pageTop" id="goPageTop"></a>
   <a href="#" id="goPageHome"></a>
  </section>
</div>
/* CSS */
      .top_sec {
    position: fixed;
    bottom: 74px;
    right: 12px;
    width: 42px;
    z-index: 999;
    display: none;
   }
   
   #goPageTop {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: url(img/go_top_icon.png) no-repeat 0 0;
    background-size: 42px auto;
    display: block;
   }
   
   #goPageHome {
    width: 42px;
    height: 42px;
    position: relative;
    border-radius: 50%;
    background: url(img/go_home_icon.png) no-repeat 0 0;
    background-size: 42px auto;
    display: block;
   }

2)来看看实现代码

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
   <script type="text/javascript">
   /* 回到顶部 */
   $(function() {
    $(function() {
     $(window).scroll(function() {
      /* 判断滚动条 距离页面顶部的距离 100可以自定义*/
      if($(window).scrollTop() > 100) {
       $("#top_sec").fadeIn(100); /* 这里用.show()也可以 只是效果太丑 */
      } else {
       $("#top_sec").fadeOut(100);
      }
     });
    });
    /* 给图片元素绑定 回到顶部的事件 */
    $(function() {
     $("#goPageTop").on("click", function() {
      $('body,html').animate({
       scrollTop: 0
      }, 1000);
      return false;
     });
    });
   });
</script>

3)这是效果图

总结:一定注意是否引用了JQ类库。

以上就是本文的全部内容,希望对大家有所帮助,谢谢对脚本之家的支持!

相关文章

  • 关于jquery性能最佳实践的讨论,与求教

    关于jquery性能最佳实践的讨论,与求教

    很久没写东西,年前的项目也接近尾声,最近在网上看到一篇文章是 阮一峰 的 《jQuery最佳实践》 链接在文末
    2012-03-03
  • 7个jQuery最佳实践

    7个jQuery最佳实践

    这篇文章主要为大家分享了7个jQuery最佳实践,在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jquery实现手机号码选号的方法

    jquery实现手机号码选号的方法

    这篇文章主要介绍了jquery实现手机号码选号的方法,涉及jquery针对手机号码的分析与筛选技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • jQuery+Ajax实现无刷新操作

    jQuery+Ajax实现无刷新操作

    这篇文章主要介绍了jQuery+Ajax实现无刷新操作,分享了采用Ashx+jQuery Ajax实现“无刷新登录”的例子,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery判断复选框是否勾选的原理及示例

    jQuery判断复选框是否勾选的原理及示例

    要实现这样的一个功能复选框勾选时给input表单赋值,复选框取消时将表单值清除,需要的朋友可以参考下
    2014-05-05
  • jquery实现多次上传同一张图片

    jquery实现多次上传同一张图片

    本文主要介绍了jquery实现多次上传同一张图片的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jquery中.add()的使用分析

    jquery中.add()的使用分析

    本篇文章介绍了,在jquery中.add()的使用分析。需要的朋友参考下
    2013-04-04
  • jquery isType() 类型判断代码

    jquery isType() 类型判断代码

    jquery isType() 类型判断代码,需要的朋友可以参考下。
    2011-02-02
  • jQuery中show与hide方法用法示例

    jQuery中show与hide方法用法示例

    这篇文章主要介绍了jQuery中show与hide方法用法,结合实例形式分析了jQuery使用show与hide方法控制页面元素显示与隐藏的简单实现技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery源码分析之Event事件分析

    jQuery源码分析之Event事件分析

    对于javascript事件扩展,所有的lib都差不多。和jquery和prototype,yui和Ext,其要解决的首要问题是兼容性,所有 lib都会对event进行包裹,统一其属性解决其兼容性。
    2010-06-06

最新评论