【JQ+锚标记实现点击页面回到顶部】
2016-11-22 22:24
309 查看
前言:今天想写个页面常用到的【点击回到页面顶部或是首页的功能】,生活和职场一样,总会有低谷的时候,这个时候咱也别怂、别怂、别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑着走的,还给小白挥了挥手,微笑一个。那句话叫什么来着,佛祖虽给你关了一扇门,说不定会再给你开一扇窗。明天我就换工作了,我感谢我的同学。
a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置
b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔【有时间就写】
1)首先我们写好DOM结构、写好CSS样式表
2)来看看实现代码
3)这是效果图
总结:一定注意是否引用了JQ类库。我觉得我写的东西都很简单,也许根本就没必要写,但是,一个学习前端开发的过程,我有必要用文字记录一下这个过程,渐渐地,这个过程会记录更多的东西。明天又是新的一天,我的新工作...
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)来看看实现代码
1 <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; }); }); }); 24 </script>
3)这是效果图
总结:一定注意是否引用了JQ类库。我觉得我写的东西都很简单,也许根本就没必要写,但是,一个学习前端开发的过程,我有必要用文字记录一下这个过程,渐渐地,这个过程会记录更多的东西。明天又是新的一天,我的新工作...
相关文章推荐
- 【JQ+锚标记实现点击页面回到顶部】
- jquery实现点击页面回到顶部
- JQuery点击事件回到页面顶部效果的实现代码
- jquery实现点击回到页面顶部
- 页面底部的回到顶部的按钮实现
- android端实现长页面回到顶部
- 页面回到顶部的实现及原理
- 【android开发】使用PopupWindow实现页面点击顶部弹出下拉菜单
- 基于JavaScript实现回到页面顶部动画代码
- 页面回到顶部的三种实现(锚标记,js)
- 页面回到顶部的三种实现(锚标记,js)
- 【android开发】使用PopupWindow实现页面点击顶部弹出下拉菜单
- 【Web Trick 9】实现页面中的“回到顶部”按钮
- 实现点击图标使界面回到顶部
- JS实现回到页面顶部动画效果的简单实例
- JS实现页面回到顶部效果
- js实现网页页面回到顶部
- JQuery点击事件回到页面顶部效果
- javascript 点击 回到页面顶部