jquery实现点击页面回到顶部


Posted in Javascript onNovember 23, 2016

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)这是效果图

jquery实现点击页面回到顶部

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

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 #Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 #Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 #Javascript
JavaScript实现的CRC32函数示例
Nov 23 #Javascript
JavaScript 控制字体大小设置的方法
Nov 23 #Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 #Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php SQL Injection with MySQL
2011/02/27 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php实现的验证码文件类实例
2015/06/18 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
Delphi CS笔试题
2014/01/04 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
心得体会的写法
2014/09/05 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
团结友爱主题班会
2015/08/13 职场文书
成人成长感言如何写?
2019/08/16 职场文书