<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 返回顶部</title>
<link rel="stylesheet" href="base.css" />
<style>
#toTop {
padding: 20px;
background: #06c;
color: #fff;
position:fixed;
display:none;
bottom:100px;
right:80px;
}
</style>
</head>
<body style="height:3000px;">
<h3 style=" text-align: center; padding-top: 40px;">阅谁问君诵，水落清香浮</h3>
<div id="toTop">返回顶部</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > 100){
$("#toTop").fadeIn(600);
} else {
$("#toTop").fadeOut(600);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#toTop").click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
</body>
</html>
PS：不兼容IE6，IE7。其他的都兼容。
效果图：
相关推荐
这篇文章将详细讲解如何实现"jQ带返回顶部右侧悬浮客服"这一功能，它结合了JavaScript库jQuery和HTML/CSS技术，适用于商城网站或其他需要在线客服和返回顶部功能的网页。 首先，"jQ"指的是jQuery，一个高效、简洁且...
"弹性返回顶部JQ代码"是指利用jQuery库实现的这种功能，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及动画效果的创建。 首先，我们需要理解jQuery的基础知识。jQuery是由John Resig创建的一...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户快速地将浏览焦点移回页面顶部，特别是在长页面滚动时。本文将深入探讨如何利用jQuery这一强大的JavaScript库来实现这一功能。 首先，jQuery是...
这是一个关于使用jQuery实现的前端功能，具体是"带返回顶部和右侧悬浮的在线客服代码"。这个压缩包包含了实现这一功能所需的所有文件。下面将详细解释这个功能涉及到的关键技术点和实现过程。 首先，我们来看jQuery...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户轻松地将浏览器滚动到页面的顶部，特别是在浏览长页面时。本文将详细介绍如何使用jQuery实现平滑的返回顶部效果，并确保该功能在古老的Internet...
标题“jq右侧微信返回顶部.zip”暗示我们这个压缩包包含的资源是关于在网页中实现一个类似微信App的右侧面板返回顶部的功能。这个功能通常出现在页面滚动时，当用户向下浏览页面，一个按钮会出现在屏幕右下角，点击...
本文将详细介绍如何使用jQuery编写缓冲效果的返回顶部JS代码。 首先，我们需要理解“缓冲”（Buffering）在动画中的含义。缓冲效果是指元素在移动过程中不是立即到达目的地，而是以一种平滑、渐进的方式过渡。在...
jQuery实现一个动画版缓动返回顶部和底部的效果，里面附有demo，可以根据需求直接修改
在本文档中，我们将探讨如何实现一个兼容IE6、基于CSS和jQuery的简单且独立的返回顶部特效。 首先，这个特效的特点在于其简洁性和兼容性。它使用jQuery库来处理交互逻辑，确保在包括IE6在内的各种主流浏览器中都能...
在网页设计中，返回顶部（Back to Top）功能是一个常见的用户体验优化元素，它允许用户轻松地将滚动条移回页面的顶部。在这个场景下，我们关注的是如何使用jQuery这一流行的JavaScript库来实现这一功能，而尽可能...
在网页设计中，经常需要实现一个功能：当用户滚动页面到一定位置时，提供一个返回顶部的链接，以便用户快速回到页面的顶端。这个功能可以通过jQuery库来轻松实现。jQuery是一个强大的JavaScript库，它简化了...
这个“返回顶部”的功能通常通过一个按钮实现，当页面滚动到一定高度时，按钮出现，点击后页面瞬间跳转至顶部。在本案例中，我们讨论的是一个使用jQuery实现的此类功能，名为“jQuery超出屏幕高度显示返回顶部”。 ...
【jQuery带返回顶部右侧悬浮在线客服代码】是一个实用的网页交互功能，结合了jQuery库和在线客服系统的实现，旨在提供用户友好的体验。这个功能包括两个主要部分：一是页面滚动时显示的“返回顶部”按钮，二是右侧...
在网页设计中，"返回顶部"功能是一种常见的用户体验优化手段，它允许用户快速地将页面滚动到顶部，尤其是在浏览长内容时。在这个场景中，我们关注的是使用jQuery实现的一个特别的返回顶部效果——可变透明度。这个...
在网页设计中，提供一个“返回顶部”的功能是非常常见的需求，尤其对于长页面而言，它可以帮助用户快速地回到页面的起始位置。本教程将详细讲解如何使用jQuery来实现一个响应式的返回顶部按钮。 首先，我们需要理解...
返回顶部插件jQuery.gototop是一款非常实用的网页交互元素，主要目的是为用户提供便捷的导航功能，让他们在浏览长页面时能轻松返回页面顶部。这个插件是基于JavaScript库jQuery构建的，jQuery是一个轻量级、高性能的...
在网页设计中，"返回顶部"功能是一个常见且实用的设计元素，它允许用户轻松地将浏览页面滚动到顶部，提供良好的用户体验。本项目是模仿天猫网站的返回顶部效果，使用了HTML、JavaScript（JQuery）、CSS这三种核心...
《jQuery绿色QQ在线客服返回顶部代码》 在网页设计中，提供良好的用户体验是至关重要的，而jQuery库为我们提供了丰富的交互效果和便捷的操作方式。本文将深入解析“jQuery绿色QQ在线客服返回顶部代码”这一功能，它...