jquery实现点击页面回到顶部

a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置

b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔【有时间就写】

1)首先我们写好DOM结构、写好CSS样式表

rush:js;"> /* HTML */

etop">

rush:js;"> /* CSS */       .top_sec { position: fixed; bottom: 74px; right: 12px; width: 42px; z-index: 999; display: none; }

goPagetop {

width: 42px;
height: 42px;
margin-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 10px;
border-radius: 50%;
background: url(img/go_top_icon.png) no-repeat 0 0;
background-size: 42px auto;
<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: 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;
<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block;

}

2)来看看实现代码

rush:js;">

3)这是效果

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

以上就是本文的全部内容,希望对大家有所帮助,谢谢对编程之家的支持

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...