首页 > 代码库 > 【JQ+锚标记实现点击页面回到顶部】
【JQ+锚标记实现点击页面回到顶部】
前言：今天想写个页面常用到的【点击回到页面顶部或是首页的功能】，生活和职场一样，总会有低谷的时候，这个时候咱也别怂、别怂、别怂，说三遍！那都不是事，工作没了，再找呗，就像我上周五，团队解散那天，我是笑着走的，还给小白挥了挥手，微笑一个。那句话叫什么来着，佛祖虽给你关了一扇门，说不定会再给你开一扇窗。明天我就换工作了，我感谢我的同学。
a)下面看看实现，实现很简单，通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标（换一种理解：滚动条顶端距离页面顶部的距离），另外一种实现方法，就是通过锚标记，很好理解，就是标记一个位置，事件激活时，给我回到这个位置
b)JQ判断滚动条向下滚动的长度大于多少时，这个方法，也可以用来做页面的自动加载...就是你不停滚动，数据就不停加载...用户体验很好的喔【有时间就写】
1）首先我们写好DOM结构、写好CSS样式表
1 /* HTML */2 <div style="width: 100%; height: 3000px;">3 <!--这个带ID的p标签，叫做锚标记，放在页面顶部位置，目的：防止代码不起作用时(比如类库版本浏览器不支持)，你点击回到顶部，仍然可以通过锚标记实现-->4 <p id="pageTop"></p>5 <section id="top_sec" class="top_sec">6 <a href="#pageTop" id="goPageTop"></a>7 <a href="#" id="goPageHome"></a>8 </section>9 </div>
1 /* CSS */ 2 .top_sec { 3 position: fixed; 4 bottom: 74px; 5 right: 12px; 6 width: 42px; 7 z-index: 999; 8 display: none; 9 }10 11 #goPageTop {12 width: 42px;13 height: 42px;14 margin-bottom: 10px;15 border-radius: 50%;16 background: url(img/go_top_icon.png) no-repeat 0 0;17 background-size: 42px auto;18 display: block;19 }20 21 #goPageHome {22 width: 42px;23 height: 42px;24 position: relative;25 border-radius: 50%;26 background: url(img/go_home_icon.png) no-repeat 0 0;27 background-size: 42px auto;28 display: block;29 }
2）来看看实现代码
1
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 2 /* 回到顶部 */ 3 $(function() { 4 $(function() { 5 $(window).scroll(function() { 6 /* 判断滚动条 距离页面顶部的距离 100可以自定义*/ 7 if($(window).scrollTop() > 100) { 8 $("#top_sec").fadeIn(100); /* 这里用.show()也可以 只是效果太丑 */ 9 } else {10 $("#top_sec").fadeOut(100);11 }12 });13 });14 /* 给图片元素绑定 回到顶部的事件 */15 $(function() {16 $("#goPageTop").on("click", function() {17 $(‘body,html‘).animate({18 scrollTop: 019 }, 1000);20 return false;21 });22 });23 });24 </script>
3）这是效果图
总结：一定注意是否引用了JQ类库。我觉得我写的东西都很简单，也许根本就没必要写，但是，一个学习前端开发的过程，我有必要用文字记录一下这个过程，渐渐地，这个过程会记录更多的东西。明天又是新的一天，我的新工作...
【JQ+锚标记实现点击页面回到顶部】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。