jQuery实现返回顶部功能

于 2014-05-14 16:46:54 发布
阅读量573 收藏 2
点赞数
分类专栏： jquary

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

             

第一种实现

一、JSP或HTML(主体结构)

在body中添加

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <body id="top">  
  2. <p id="back-to-top"><a href="#top"><span></span></a></p>  
  3. </body>  

二、CSS(样式化)

[css]  view plain copy 在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 plain copy 在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 plain copy 在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 plain copy 在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>  
wangxiaohui6687
关注
专栏目录
回到顶部和返回首页jquery插件
weixin_33725272的博客
05-06 141
打造最全的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交互逻辑处理以及兼容性考虑和图像资源的使用技巧。
智慧旅游景区解决方案PPT(50页).pptx
09-21
智慧旅游解决方案利用云计算、物联网和移动互联网技术，通过便携终端设备，实现对旅游资源、经济、活动和旅游者信息的智能感知和发布。这种技术的应用旨在提升游客在旅游各个环节的体验，使他们能够轻松获取信息、规划行程、预订票务和安排食宿。智慧旅游平台为旅游管理部门、企业和游客提供服务，包括政策发布、行政管理、景区安全、游客流量统计分析、投诉反馈等。此外，平台还提供广告促销、库存信息、景点介绍、电子门票、社交互动等功能。 智慧旅游的建设规划得到了国家政策的支持，如《国家中长期科技发展规划纲要》和国务院的《关于加快发展旅游业的意见》，这些政策强调了旅游信息服务平台的建设和信息化服务的重要性。随着技术的成熟和政策环境的优化，智慧旅游的时机已经到来。 智慧旅游平台采用SaaS、PaaS和IaaS等云服务模式，提供简化的软件开发、测试和部署环境，实现资源的按需配置和快速部署。这些服务模式支持旅游企业、消费者和管理部门开发高性能、高可扩展的应用服务。平台还整合了旅游信息资源，提供了丰富的旅游产品创意平台和统一的旅游综合信息库。 智慧旅游融合应用面向游客和景区景点主管机构，提供无线城市门户、智能导游、智能门票及优惠券、景区综合安防、车辆及停车场管理等服务。这些应用通过物联网和云计算技术，实现了旅游服务的智能化、个性化和协同化，提高了旅游服务的自由度和信息共享的动态性。 智慧旅游的发展标志着旅游信息化建设的智能化和应用多样化趋势，多种技术和应用交叉渗透至旅游行业的各个方面，预示着全面的智慧旅游时代已经到来。智慧旅游不仅提升了游客的旅游体验，也为旅游管理和服务提供了高效的技术支持。
智慧旅游实景三维智慧景区建设方案PPT(70页).pptx
09-21
智慧旅游解决方案利用云计算、物联网和移动互联网技术，通过便携终端设备，实现对旅游资源、经济、活动和旅游者信息的智能感知和发布。这种技术的应用旨在提升游客在旅游各个环节的体验，使他们能够轻松获取信息、规划行程、预订票务和安排食宿。智慧旅游平台为旅游管理部门、企业和游客提供服务，包括政策发布、行政管理、景区安全、游客流量统计分析、投诉反馈等。此外，平台还提供广告促销、库存信息、景点介绍、电子门票、社交互动等功能。 智慧旅游的建设规划得到了国家政策的支持，如《国家中长期科技发展规划纲要》和国务院的《关于加快发展旅游业的意见》，这些政策强调了旅游信息服务平台的建设和信息化服务的重要性。随着技术的成熟和政策环境的优化，智慧旅游的时机已经到来。 智慧旅游平台采用SaaS、PaaS和IaaS等云服务模式，提供简化的软件开发、测试和部署环境，实现资源的按需配置和快速部署。这些服务模式支持旅游企业、消费者和管理部门开发高性能、高可扩展的应用服务。平台还整合了旅游信息资源，提供了丰富的旅游产品创意平台和统一的旅游综合信息库。 智慧旅游融合应用面向游客和景区景点主管机构，提供无线城市门户、智能导游、智能门票及优惠券、景区综合安防、车辆及停车场管理等服务。这些应用通过物联网和云计算技术，实现了旅游服务的智能化、个性化和协同化，提高了旅游服务的自由度和信息共享的动态性。 智慧旅游的发展标志着旅游信息化建设的智能化和应用多样化趋势，多种技术和应用交叉渗透至旅游行业的各个方面，预示着全面的智慧旅游时代已经到来。智慧旅游不仅提升了游客的旅游体验，也为旅游管理和服务提供了高效的技术支持。
基于深度学习实现的半监督学习例子.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
关于APx测试耳机音频的参数设置及步骤 关于APx测试耳机音频的参数设置及步骤
09-21
关于APx测试耳机音频的参数设置及步骤 关于APx测试耳机音频的参数设置及步骤
jQuery背景可滑动的导航菜单代码，鼠标经过导航时导航背景可滑动，兼容主流浏览器
09-21
jQuery背景可滑动的导航菜单代码，鼠标经过导航时导航背景可滑动，兼容主流浏览器 使用方法： 1、引入reset.css、index.css、jquery-1.7.2.min.js库文件，及jquery.movebg.js插件 2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3、移动的滑动可根据需要自由修改外观
Matlab实验指导书.doc
09-21
Matlab实验指导书.doc
S7-1200 计数器介绍
09-21
PLC
010编辑器，好用的二进制编辑器
09-21
010编辑器，好用的二进制编辑器
制作表彰奖状-使用电子表格批处理数据.pptx
09-21
信息技术教学ppt
智能翻译官cpc-bd07-20752777288491826.exe
最新发布
09-21
‌智能翻译官获得了广泛的好评‌，这主要得益于其高效、准确以及用户友好的特性。以下是一些具体的评价细节： ‌用户界面和操作体验‌：智能翻译官提供了一个直观且易于使用的界面，使得用户能够轻松地进行翻译操作。无论是文字输入、拍照翻译还是语音输入，智能翻译官都能提供流畅的使用体验，大大提高了用户的工作和沟通效率‌12。 ‌翻译准确性和速度‌：智能翻译官在翻译准确性和速度方面表现出色。它支持多种语言的翻译，包括但不限于英语、日语、韩语等，并且能够在短时间内完成翻译，确保了沟通的实时性和有效性‌23。 ‌功能多样性‌：除了基本的翻译功能外，智能翻译官还提供了同声传译、录音文件保存、实景AR翻译等多种功能。这些功能使得智能翻译官成为开会、旅行等多种场景下的理想选择‌2。 ‌用户反馈‌：从用户反馈来看，智能翻译官不仅受到了普通用户的欢迎，也得到了专业人士的认可。无论是学生、商务人士还是旅游者，都对其表示满意，认为它极大地便利了他们的学习和生活‌12。 综上所述，智能翻译官以其高效、准确、用户友好的特点，赢得了广泛的好评和推荐。无论是对于需要频繁进行语言沟通的用户，还是对于需要学习不同语言的学
基于深度学习的自动相册分类系统.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
【目标识别】基于matlab红外光图像小目标识别【含Matlab源码 7571期】.zip
09-21
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 图像识别：表盘识别、车道线识别、车牌识别、答题卡识别、电器识别、跌倒检测、动物识别、发票识别、服装识别、汉字识别、红绿灯识别、火灾检测、疾病分类、交通标志牌识别、口罩识别、裂缝识别、目标跟踪、疲劳检测、身份证识别、人民币识别、数字字母识别、手势识别、树叶识别、水果分级、条形码识别、瑕疵检测、芯片识别、指纹识别
基于深度学习的肺炎分类研究.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
Python搭建基于numpy的卷积神经网络来进行cifar-10分类的深度学习系统
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
"js JQuery实现网页返回顶部功能详解【2021更新】
许多网站上都有返回顶部的效果，...总的来说，实现返回顶部功能主要包括监测用户滚动行为和设置返回顶部按钮的点击事件，通过一些简单的jQuery操作即可实现。希望本文能对您有所帮助，如有疑问或问题，请随时联系我们。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值