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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
小程序实现五星点评效果
Nov 03 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
JS实现小米轮播图
Sep 21 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
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python读取文件名称生成list的方法
2018/04/27 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
iPython pylab模式启动方式
2020/04/24 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
销售代表求职自荐信
2013/10/01 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
法律意见书范文
2015/06/04 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
分享Python异步爬取知乎热榜
2022/04/12 Python