jQuery实现返回顶部功能

最新推荐文章于 2022-03-07 09:57:01 发布
最新推荐文章于 2022-03-07 09:57:01 发布
阅读量538 收藏
点赞数
分类专栏： 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 实现返回顶部功能
10-25
事件绑定是实现返回顶部功能的关键步骤之一。在文档加载完成后，我们需要绑定`resize`事件和`scroll`事件到窗口上，并对返回顶部按钮绑定点击事件，以便在触发这些事件时执行相应的函数。 知识点六：淡入淡出效果 ...
回到顶部和返回首页jquery插件
weixin_33725272的博客
05-06 142
打造最全的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实现返回顶部功能
HusKiy的博客
10-31 2318
先来看看效果，当滚动的距离超过蓝色方块的时候，就会显示返回顶部的文字，这时候点击返回顶部就会自动返回顶部 <style> body { height: 2000px; } .back { position: fixed; width: 100px; height: 50px; right: 30px; .
Jquery实现返回顶部功能
qq_44732752的博客
03-07 597
HTML部分 <div class="fanhui-top"> <!--我这里用的是阿里巴巴图标--> <i class="iconfont" style="font-size: 20px;">&#xe633;</i> </div> Jquery部分 //1.隐藏返回顶部按钮 $(".fanhui-top").hide() //2.当窗口滚动距离>100px时，显示按钮，否则隐藏按钮 $(win
使用jQuery实现返回顶部功能
进击的Ace
05-12 61
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。 要想让返回顶部的图片显示在右侧...
html一键返回顶部算法,jquery 实现返回顶部功能
weixin_42311349的博客
06-03 211
今天搞了一个回到顶部的JS JQ功能，废话不多说，有图有真相！代码如下:FeedCreat=function(){var FeedHtml=$('FeedBack">');FeedHtml.html('\u8fd4\u56de\u9876\u90e8\u610f\u89c1\u53cd\u9988');$("body").append(FeedHtml);__ie6Fixed()};//绑定...
用java实现返回顶部_[Java教程]javascript+JQuery实现返回顶部功能
weixin_35555014的博客
02-26 156
[Java教程]javascript+JQuery实现返回顶部功能0 2013-12-14 14:00:04很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素：id="back-to-top">href="#top">返回顶部其中a标签指向锚点top，可以在顶部防止一个name="top">的锚点，这样在...
JQuery实现返回顶部功能
H3前端笔记
11-08 774
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1500);
jQuery实现返回顶部功能适合不支持js的浏览器
10-25
...锚点的实现方式是通过一个`<a>`标签并赋予一...以上就是利用jQuery实现返回顶部功能的各个知识点，包括了HTML锚点的设置、CSS样式的布局和动画效果实现、JavaScript交互逻辑处理以及兼容性考虑和图像资源的使用技巧。
基于JavaScript和HTML的前端私教课程设计源码
09-24
该项目是一个基于JavaScript和HTML的前端私教课程设计源码，主要使用JavaScript语言开发。项目共包含54个文件，其中33个JavaScript文件，7个HTML文件，6个Markdown文件，4个Java文件，2个PDF文件，1个JSON文件，1个YAML文件。该课程设计旨在提供高效的前端学习资源。
嵌入式学习之光照不足报警检测电路.zip
09-24
嵌入式学习，电子信息技术
python1Python脚本 模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机PGL.zip
09-24
[python1]Python脚本。模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机【PGL】.zip [python1]Python脚本。模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机【PGL】.zip [python1]Python脚本。模拟登录知乎， 爬虫，操作excel，微信公众号，远程开机【PGL】.zip
基于C语言的思维车载设备OTA升级模块设计源码
09-24
该项目是基于C语言的思维车载设备OTA升级模块设计源码，包含42个文件，其中包括16个头文件（.h）、15个源文件（.c）、3个JSON配置文件、1个Git忽略文件、1个主Makefile文件、1个构建目录、1个Markdown文档以及多个子目录下的Makefile文件。该模块专为思维车载设备设计，实现了一键OTA升级功能，提高了设备的维护效率和用户体验。
geopandas安装包(pip install)_geopandas-0.8.1.tar.zip
09-24
在使用Python来安装geopandas包时，由于geopandas依赖于几个其他的Python库（如GDAL, Fiona, Pyproj, Shapely等），因此安装过程可能需要一些额外的步骤。以下是一个基本的安装指南，适用于大多数用户： 使用pip安装 确保Python和pip已安装： 首先，确保你的计算机上已安装了Python和pip。pip是Python的包管理工具，用于安装和管理Python包。 安装依赖库： 由于geopandas依赖于GDAL, Fiona, Pyproj, Shapely等库，你可能需要先安装这些库。通常，你可以通过pip直接安装这些库，但有时候可能需要从其他源下载预编译的二进制包（wheel文件），特别是GDAL和Fiona，因为它们可能包含一些系统级的依赖。 bash pip install GDAL Fiona Pyproj Shapely 注意：在某些系统上，直接使用pip安装GDAL和Fiona可能会遇到问题，因为它们需要编译一些C/C++代码。如果遇到问题，你可以考虑使用conda（一个Python包、依赖和环境管理器）来安装这些库，或者从Unofficial Windows Binaries for Python Extension Packages这样的网站下载预编译的wheel文件。 安装geopandas： 在安装了所有依赖库之后，你可以使用pip来安装geopandas。 bash pip install geopandas 使用conda安装 如果你正在使用conda作为你的Python包管理器，那么安装geopandas和它的依赖可能会更简单一些。 创建一个新的conda环境（可选，但推荐）： bash conda create -n geoenv python=3.x anaconda conda activate geoenv 其中3.x是你希望使用的Python版本。 安装geopandas： 使用conda-forge频道来安装geopandas，因为它提供了许多地理空间相关的包。 bash conda install -c conda-forge geopandas 这条命令会自动安装geopandas及其所有依赖。 注意事项 如果你在安装过程中遇到任何问题，比如编译错误或依赖问题，请检查你的Python版本和pip/conda的版本是否是最新的，或者尝试在不同的环境中安装。 某些库（如GDAL）可能需要额外的系统级依赖，如地理空间库（如PROJ和GEOS）。这些依赖可能需要单独安装，具体取决于你的操作系统。 如果你在Windows上遇到问题，并且pip安装失败，尝试从Unofficial Windows Binaries for Python Extension Packages网站下载相应的wheel文件，并使用pip进行安装。 脚本示例 虽然你的问题主要是关于如何安装geopandas，但如果你想要一个Python脚本来重命名文件夹下的文件，在原始名字前面加上字符串"geopandas"，以下是一个简单的示例： python import os # 指定文件夹路径 folder_path = 'path/to/your/folder' # 遍历文件夹中的文件 for filename in os.listdir(folder_path): # 构造原始文件路径 old_file_path = os.path.join(folder_path, filename) # 构造新文件名 new_filename = 'geopandas_' + filename # 构造新文件路径 new_file_path = os.path.join(folder_path, new_filename) # 重命名文件 os.rename(old_file_path, new_file_path) print(f'Renamed "{filename}" to "{new_filename}"') 请确保将'path/to/your/folder'替换为你想要重命名文件的实际文件夹路径。
基于Java和HTML的见证成长工作演示设计源码
最新发布
09-24
该项目是基于Java和HTML的见证成长工作演示设计源码，包含25个文件，具体包括14个Java源文件、3个属性文件、2个Gradle构建文件、2个YAML配置文件、1个Git忽略文件、1个Markdown文档、1个XML配置文件和1个HTML页面。适用于需要展示成长历程和工作成果的演示场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值