`

JQ 简单的返回顶部

阅读更多
<!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。其他的都兼容。

 

效果图:

 

 

 

 

  • 大小: 14.9 KB
1
1
分享到:
评论

相关推荐

    jQ带返回顶部右侧悬浮客服.zip

    这篇文章将详细讲解如何实现"jQ带返回顶部右侧悬浮客服"这一功能,它结合了JavaScript库jQuery和HTML/CSS技术,适用于商城网站或其他需要在线客服和返回顶部功能的网页。 首先,"jQ"指的是jQuery,一个高效、简洁且...

    弹性返回顶部JQ代码

    "弹性返回顶部JQ代码"是指利用jQuery库实现的这种功能,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果的创建。 首先,我们需要理解jQuery的基础知识。jQuery是由John Resig创建的一...

    jQuery实现返回顶部

    在网页设计中,"返回顶部"功能是一个常见且实用的设计元素,它允许用户快速地将浏览焦点移回页面顶部,特别是在长页面滚动时。本文将深入探讨如何利用jQuery这一强大的JavaScript库来实现这一功能。 首先,jQuery是...

    jQ带返回顶部右侧悬浮客服 jQuery带返回顶部右侧悬浮在线客服代码.zip

    这是一个关于使用jQuery实现的前端功能,具体是"带返回顶部和右侧悬浮的在线客服代码"。这个压缩包包含了实现这一功能所需的所有文件。下面将详细解释这个功能涉及到的关键技术点和实现过程。 首先,我们来看jQuery...

    jquery平滑返回顶部效果(兼容IE6)

    在网页设计中,"返回顶部"功能是一个常见且实用的设计元素,它允许用户轻松地将浏览器滚动到页面的顶部,特别是在浏览长页面时。本文将详细介绍如何使用jQuery实现平滑的返回顶部效果,并确保该功能在古老的Internet...

    jq右侧微信返回顶部.zip

    标题“jq右侧微信返回顶部.zip”暗示我们这个压缩包包含的资源是关于在网页中实现一个类似微信App的右侧面板返回顶部的功能。这个功能通常出现在页面滚动时,当用户向下浏览页面,一个按钮会出现在屏幕右下角,点击...

    jQuery 缓冲返回网页顶部JS代码

    本文将详细介绍如何使用jQuery编写缓冲效果的返回顶部JS代码。 首先,我们需要理解“缓冲”(Buffering)在动画中的含义。缓冲效果是指元素在移动过程中不是立即到达目的地,而是以一种平滑、渐进的方式过渡。在...

    jQuery实现一个动画版返回顶部和底部的效果

    jQuery实现一个动画版缓动返回顶部和底部的效果,里面附有demo,可以根据需求直接修改

    独立简单返回顶部效果兼容IE6 CSS JQ特效.docx

    在本文档中,我们将探讨如何实现一个兼容IE6、基于CSS和jQuery的简单且独立的返回顶部特效。 首先,这个特效的特点在于其简洁性和兼容性。它使用jQuery库来处理交互逻辑,确保在包括IE6在内的各种主流浏览器中都能...

    JQ 最少代码实现返回顶部功能

    在网页设计中,返回顶部(Back to Top)功能是一个常见的用户体验优化元素,它允许用户轻松地将滚动条移回页面的顶部。在这个场景下,我们关注的是如何使用jQuery这一流行的JavaScript库来实现这一功能,而尽可能...

    jquery 制作鼠标点击描点a标签返回顶部

    在网页设计中,经常需要实现一个功能:当用户滚动页面到一定位置时,提供一个返回顶部的链接,以便用户快速回到页面的顶端。这个功能可以通过jQuery库来轻松实现。jQuery是一个强大的JavaScript库,它简化了...

    jQuery带返回顶部右侧悬浮在线客服代码

    【jQuery带返回顶部右侧悬浮在线客服代码】是一个实用的网页交互功能,结合了jQuery库和在线客服系统的实现,旨在提供用户友好的体验。这个功能包括两个主要部分:一是页面滚动时显示的“返回顶部”按钮,二是右侧...

    jQuery超出屏幕高度显示返回顶部.zip

    这个“返回顶部”的功能通常通过一个按钮实现,当页面滚动到一定高度时,按钮出现,点击后页面瞬间跳转至顶部。在本案例中,我们讨论的是一个使用jQuery实现的此类功能,名为“jQuery超出屏幕高度显示返回顶部”。 ...

    jQuery可变透明度返回顶部

    在网页设计中,"返回顶部"功能是一种常见的用户体验优化手段,它允许用户快速地将页面滚动到顶部,尤其是在浏览长内容时。在这个场景中,我们关注的是使用jQuery实现的一个特别的返回顶部效果——可变透明度。这个...

    带微信二维码jQuery返回顶部效果代码,鼠标划过二维码图标会缩放弹出二维码图片,效果实用,兼容主流浏览器

    带微信二维码jQuery返回顶部效果代码,鼠标划过二维码图标会缩放弹出二维码图片,效果实用,兼容主流浏览器

    jQuery响应式网页返回顶部按钮代码

    在网页设计中,提供一个“返回顶部”的功能是非常常见的需求,尤其对于长页面而言,它可以帮助用户快速地回到页面的起始位置。本教程将详细讲解如何使用jQuery来实现一个响应式的返回顶部按钮。 首先,我们需要理解...

    jquery 实现返回顶部功能

    今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 代码如下: (function($){  $.fn.survey=function(options){  var defaults={width:”298″,height:”207″};  var options=$.extend(defaults,...

    返回顶部插件jquery.gototop.zip

    返回顶部插件jQuery.gototop是一款非常实用的网页交互元素,主要目的是为用户提供便捷的导航功能,让他们在浏览长页面时能轻松返回页面顶部。这个插件是基于JavaScript库jQuery构建的,jQuery是一个轻量级、高性能的...

Global site tag (gtag.js) - Google Analytics