jQuery实现返回顶部功能

于 2014-08-03 03:03:00 发布
阅读量537 收藏
点赞数
分类专栏： Jquery

JS、Jquery技术学习 https://www.itkc8.com 

整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图

             

第一种实现

一、JSP或HTML(主体结构)

在body中添加

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <body id="top">  
  2. <p id="back-to-top"><a href="#top"><span></span></a></p>  
  3. </body>  


二、CSS(样式化)

 

 

 

 

[css] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <style>  
  2.     p#back-to-top {  
  3.         position: fixed;  
  4.         bottom: 50px;  
  5.         right: 50px;  
  6.     }  
  7.       
  8.     p#back-to-top a {  
  9.         text-align: center;  
  10.         text-decoration: none;  
  11.         color: #d1d1d1;  
  12.         display: block;  
  13.         width: 50px;  
  14.         /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/  
  15.         -moz-transition: color 1s;  
  16.         -webkit-transition: color 1s;  
  17.         -o-transition: color 1s;  
  18.     }  
  19.     p#back-to-top a:hover {  
  20.         color: #979797;  
  21.     }  
  22.     p#back-to-top a span {  
  23.         background: #d1d1d1 url(/img/back_to_top.png) no-repeat center center;  
  24.         border-radius: 6px;  
  25.         display: block;  
  26.         height: 50px;  
  27.         width: 50px;  
  28.         margin-bottom: 5px;  
  29.           /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/  
  30.         -moz-transition: background 1s;  
  31.         -webkit-transition: background 1s;  
  32.         -o-transition: background 1s;  
  33.     }  
  34.       
  35.     #back-to-top a:hover span {  
  36.         background: #979797 url(/img/back_to_top.png) no-repeat center center;  
  37.     }  
  38. </style>  

图片自己网上找资源

 

三、jQuery(动态效果)

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <script>  
  2. $(document).ready(function() {  
  3.     //首先将#back-to-top隐藏  
  4.     $("#back-to-top").hide();  
  5.   
  6.     //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失  
  7.     $(function() {  
  8.         $(window).scroll(function() {  
  9.             if ($(window).scrollTop() > 100) {  
  10.                 $("#back-to-top").fadeIn(1500);  
  11.             }  
  12.             else {  
  13.                 $("#back-to-top").fadeOut(1500);  
  14.             }  
  15.         });  
  16.         //当点击跳转链接后，回到页面顶部位置  
  17.         $("#back-to-top").click(function() {  
  18.             $('body,html').animate({  
  19.                 scrollTop: 0  
  20.             },  
  21.             500);  
  22.             return false;  
  23.         });  
  24.     });  
  25. });  
  26. </script>  

 

 


第二种实现

 

[css] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <style>  
  2.     .backToTop {  
  3.     display: none;  
  4.     width: 18px;  
  5.     line-height: 1.2;  
  6.     padding: 5px 0;  
  7.     background-color: #000;  
  8.     color: #fff;  
  9.     font-size: 12px;  
  10.     text-align: center;  
  11.     position: fixed;  
  12.     _position: absolute;  
  13.     right: 10px;  
  14.     bottom: 100px;  
  15.     _bottom: "auto";  
  16.     cursor: pointer;  
  17.     opacity: .6;  
  18.     filter: Alpha(opacity = 60);  
  19. }  
  20. </style>  

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <script>  
  2. (function() {  
  3.     var $backToTopTxt = "返回顶部"  
  4.     $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt)  
  5.     .attr("title", $backToTopTxt).click(function() {  
  6.         $("html, body").animate({  
  7.             scrollTop: 0  
  8.         },120);  
  9.     })  
  10.     $backToTopFun = function() {  
  11.         var st = $(document).scrollTop(),  
  12.         winh = $(window).height(); (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();  
  13.         //IE6下的定位  
  14.         if (!window.XMLHttpRequest) {  
  15.             $backToTopEle.css("top", st + winh - 166);  
  16.         }  
  17.     };  
  18.     $(window).bind("scroll", $backToTopFun);  
  19.     $(function() {  
  20.         $backToTopFun();  
  21.     });  
  22. })();  
  23. </script>  

 

JS、Jquery技术学习 https://www.itkc8.com 

最是那一低头的温柔
关注
专栏目录
JQuery实现“回到顶部”
PengZhen_的博客
01-08 1345
用jQuery实现回到顶部功能 通过jQuery完成一个网页滚动回到顶端的功能： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position: relative; hei
jquery 页面滚动条回到顶部_jquery实现页面常用的返回顶部效果
weixin_39752215的博客
12-21 83
这篇文章主要为大家详细介绍了jquery实现页面常用的返回顶部效果代码，感兴趣的小伙伴们可以参考一下本文实例为大家分享了jquery实现返回顶部效果的全部代码，供大家参考，具体内容如下效果图：实现代码：返回顶部*{margin: 0;padding: 0;}.wrap{height: 2000px;}.gotop{display: block;width: 32px;height: 32px;ba...
回到顶部和返回首页jquery插件
weixin_33725272的博客
05-06 140
打造最全的CMS类教程聚合！  第一种方法：在网页&lt;body&gt;&lt;/body&gt;之间插入： &lt;!--返回顶部开始--&gt;  &lt;div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px; z-index:10...
jquery 实现返回顶部功能
10-25
事件绑定是实现返回顶部功能的关键步骤之一。在文档加载完成后，我们需要绑定`resize`事件和`scroll`事件到窗口上，并对返回顶部按钮绑定点击事件，以便在触发这些事件时执行相应的函数。 知识点六：淡入淡出效果 ...
jQuery实现返回顶部功能适合不支持js的浏览器
10-25
...锚点的实现方式是通过一个`<a>`标签并赋予一...以上就是利用jQuery实现返回顶部功能的各个知识点，包括了HTML锚点的设置、CSS样式的布局和动画效果实现、JavaScript交互逻辑处理以及兼容性考虑和图像资源的使用技巧。
java基于ssm+jsp一家运动鞋店的产品推广网站系统源码 带毕业论文
09-18
1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试，代码没有任何bug！ 4、该资源包括项目的全部源码，下载可以直接使用！ 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
51单片机Proteus仿真LCD1602+DS18B20的温度读取显示编程.rar
09-18
51单片机Proteus仿真LCD1602+DS18B20的温度读取显示编程 定时器实现1秒更新一次温度数据,内含完整仿真文件和代码
暴风电视 50F1 配屏V500HJ1-PE8(C3) 机编600000MWV00 屏参30162503 风UI1.0 本地升级
09-18
务必确认机身编号与文件名机编一致，如不一致，请勿下载 机身编号一般在机子背面的贴纸上 本地升级： 1、将本地升级软件包“update”拷贝至U盘里，插入电视USB端口，打开电视进入系统设置选择本地升级。 2、选择本地升级，遥控点击确认，主板检测到U盘里面的软件进行升级，如下图所示。 3、首先效验软件，若软件不对或者软件未完整下载会导致效验失败，效验成功后如下图所示。 4、升级过程中会擦除以前的数据烧录新的软件后重启系统，整个过程大约3-5分钟，切勿断电或拔掉U盘。 升级完成后可以在系统设置——本机信息——查询软件版本更新状态 注意： 1、U盘要求使用FAT32格式，建议4G-8G的品牌U盘，刷机成功率会高 2、升级到结束，大约需要8-30分钟，中途绝对不能断电 3、升级重启第一次进入系统，请等完全正常进入开机桌面之后，才能拨下U盘
【高创新】基于蚁狮优化算法ALO-Transformer-BiLSTM实现故障识别Matlab实现.rar
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
java基于ssm+vue儿童影楼拍摄管理系统源码 带毕业论文
09-18
1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试，代码没有任何bug！ 4、该资源包括项目的全部源码，下载可以直接使用！ 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
复杂网络建模-无向图(ER、WS、BA、RR)
09-18
复杂网络建模-无向图(ER、WS、BA、RR)
VB企业人事管理系统设计与实现(开题报告+源代码+系统).zip
最新发布
09-18
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
【高创新】基于鲸鱼优化算法WOA-Transformer-BiLSTM实现故障识别Matlab实现.rar
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
Matlab simulink仿真，直驱永磁风机并网chopper低电压穿越，版本matlab2018a
09-18
Matlab simulink仿真，直驱永磁风机并网chopper低电压穿越，版本matlab2018a
http服务器的实现.7z
09-18
http服务器的实现.7z
【高创新】基于雾凇优化算法RIME-Transformer-LSTM实现故障识别Matlab实现.rar
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
"js JQuery实现网页返回顶部功能详解【2021更新】
许多网站上都有返回顶部的效果，...总的来说，实现返回顶部功能主要包括监测用户滚动行为和设置返回顶部按钮的点击事件，通过一些简单的jQuery操作即可实现。希望本文能对您有所帮助，如有疑问或问题，请随时联系我们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值