一、HTML（基本结构）
2 |
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
|
有了上面的html后，当我们点击”返回顶部”这个链接时，就会自动跳转到body标签的位置，也就是页面的顶部。
二、CSS（样式化）
之所以在上面html代码的<a>标签中添加一个空的<span>标签，目的是为了创建我们预想的返回顶部链接样式，如下图：
接下来我们需要使用position : fixed;属性将跳转链接固定到页面上，这样它就可以随时停留在视线范围内。以下是全部CSS代码：
15 |
-moz-transition:color 1s;
|
16 |
-webkit-transition:color 1s;
|
17 |
-o-transition:color 1s;
|
19 |
p#back-to-top a:hover{
|
23 |
background:#d1d1d1 url(images/arrow-up.png) no-repeat centercenter;
|
32 |
-moz-transition:background 1s;
|
33 |
-webkit-transition:background 1s;
|
34 |
-o-transition:background 1s;
|
36 |
#back-to-top a:hover span{
|
37 |
background:#979797 url(images/arrow-up.png) no-repeat centercenter;
|
三、jQuery（动态效果）
使用jQuery要实现的效果是：当页面初次载入，浏览器滚动条处于最顶部的时候，跳转链接处于隐藏状态。当滚动条向下滚动后，跳转链接逐渐显出，当点击跳转链接后，页面逐渐滚动至顶部，跳转链接逐渐消失。以下是jQuery代码：
02 |
<script type="text/javascript">
|
03 |
$(document).ready(function(){
|
07 |
$("#back-to-top").hide();
|
12 |
$(window).scroll(function(){
|
13 |
if ($(window).scrollTop()>100){
|
14 |
$("#back-to-top").fadeIn(1500);
|
18 |
$("#back-to-top").fadeOut(1500);
|
24 |
$("#back-to-top").click(function(){
|
25 |
$('body,html').animate({scrollTop:0},1000);
|
四、兼容性
这里我们给body标签添加了id=”#top”，目的是当浏览器不支持javascript的时候，也可实现返回顶部的效果。实际上jQuery可以让滚动条定位于任何位置，所以这里我们保留了对浏览器的兼容性。
本文地址:http://startwmlife.com/using-jquery-to-create-humane-back-to-top-links/
分享到：
相关推荐
本文将详细介绍如何使用 jQuery 实现“返回顶部”的功能。 ### 一、HTML 结构 首先，我们需要在页面底部添加一个“返回顶部”的按钮，通常将其设置为一个链接元素（`<a>`），并隐藏在页面的角落里，如右下角： ``...
jQuery右端悬浮带返回顶部代码是一种常见的网页交互设计，它通常出现在页面滚动时，一个固定在屏幕右侧的小图标（如箭头或按钮）会显示出来，用户点击后页面会迅速滚动回顶部。这个功能可以提升用户体验，特别是对于...
【标题】：“动感jQuery返回顶部”这一主题主要聚焦于如何使用jQuery库来实现一个功能完善的“返回顶部”按钮。在网页设计中，当用户滚动页面到底部时，提供一个便捷的“返回顶部”链接是非常实用的，它可以帮助用户...
1. **创建返回顶部按钮** 在HTML代码中，我们可以添加一个固定在屏幕底部的按钮，作为返回顶部的触发元素。例如： ```html 返回顶部 ``` 这里的`#`是空链接，用于防止页面跳转。`id`属性用于后续的jQuery选择器...
jQuery实现一个动画版缓动返回顶部和底部的效果，里面附有demo，可以根据需求直接修改
本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法，利用了广泛使用的JavaScript库jQuery。接下来，我们将深入探讨jQuery平滑返回顶部代码的工作原理、实现方式以及如何在实际项目中应用。 首先，...
本篇文章将详细解析如何利用jQuery库来实现这一功能，以及如何创建一个底部小火箭样式的返回顶部按钮。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。在实现返回顶部...
使用jQuery，你可以监听滚动事件，当用户滚动到一定距离时，显示一个“返回顶部”的按钮。点击该按钮时，利用`scrollTop()`方法平滑地滚动回页面顶部。 6. **CSS样式**：为了使这些功能看起来更美观，你需要编写CSS...
本篇文章将详细解析如何使用jQuery技术实现一个绿色主题的QQ在线客服及返回顶部的功能。首先，我们依赖于jQuery-1.10.2.min.js库，这个版本的jQuery提供了丰富的DOM操作和事件处理能力，适合用于构建此类交互效果。 ...
在这个场景中，我们关注的是使用jQuery实现的一个特别的返回顶部效果——可变透明度。这个功能不仅提供了一个便利的导航工具，而且通过动态改变按钮的透明度，增加了交互的视觉吸引力。 jQuery是一个广泛使用的...
1. **创建元素**：在页面底部或者合适的位置添加一个“返回顶部”的按钮，通常是一个固定在屏幕底部或侧边的图标，如向上箭头。 ```html 返回顶部 ``` 2. **CSS样式**：给按钮添加合适的样式，使其在页面上可见且...
当页面滚动时(监听scroll事件)，浏览器滚动条处于最顶部时，隐藏“返回顶部”按钮，当滚动条继续向下滚动时，动态计算出当前可视窗口的...在这个过程中，我们可以使用animate来创建动画效果，即返回顶部时有个过渡效果
以上就是使用jQuery实现“返回顶部”功能的基本步骤。这个功能不仅提高了用户体验，也展示了jQuery在网页交互中的强大能力。在实际开发中，可以根据项目需求进行相应的调整和扩展，以满足不同的设计和功能要求。
**jQuery可变透明度返回顶部代码详解** 在网页设计中，提供一个返回顶部的功能是非常常见的需求，这可以方便用户在浏览长页面时快速回到页面顶部。"jQuery可变透明度返回顶部代码"就是一个实现此类功能的JavaScript...
在本案例中，我们讨论的是如何使用jQuery实现一个可隐藏的返回顶部按钮。jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作等任务，使得开发动态网页变得更加容易。 "jquery返回...
本文将详细介绍如何使用jQuery实现平滑的返回顶部效果，并确保该功能在古老的Internet Explorer 6（简称IE6）上也能正常工作。 首先，我们需要引入jQuery库，因为这个功能是基于jQuery构建的。你可以通过以下代码将...
【jQuery返回顶部跟底部浮窗代码】是一种常见的网页交互元素，用于提高用户体验。在网页滚动时，用户可以方便地点击这个浮动窗口中的按钮，快速回到页面的顶部或底部。这种设计常见于长页面，比如博客文章、产品...
这个代码示例中，使用jQuery创建了一个在页面滚动时会出现在右侧的返回顶部按钮。当用户滚动页面一定距离后，按钮将显示出来，点击则页面瞬间回到顶部。 实现这个功能的核心代码可能包括以下部分： 1. 首先，你...
【jQuery冲天火箭返回顶部动画特效】是一种使用JavaScript库jQuery实现的创新网页交互效果，它为网站添加了一个别致的“返回顶部”功能。这个特效将传统的“返回顶部”按钮设计成了一枚升空的火箭，给用户带来视觉上...
本文将详细介绍如何使用jQuery编写缓冲效果的返回顶部JS代码。 首先，我们需要理解“缓冲”（Buffering）在动画中的含义。缓冲效果是指元素在移动过程中不是立即到达目的地，而是以一种平滑、渐进的方式过渡。在...