JQ+锚标记实现点击页面回到顶部

Posted webonline

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="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: 0 19 }, 1000); 20 return false; 21 }); 22 }); 23 }); 24 </script>

 

3)这是效果图

 

总结:一定注意是否引用了JQ类库。我觉得我写的东西都很简单,也许根本就没必要写,但是,一个学习前端开发的过程,我有必要用文字记录一下这个过程,渐渐地,这个过程会记录更多的东西。明天又是新的一天,我的新工作...

以上是关于JQ+锚标记实现点击页面回到顶部的主要内容,如果未能解决你的问题,请参考以下文章

页面回到顶部的三种实现(锚标记,js)

java项目中 jsp页面的回顶部操作是怎么实现的?

js使用锚点回到顶部

前端点击回到当前页顶部

js回到顶部------转载

5种回到顶部的写法从实现到增强