`

jquery回到页面顶端

阅读更多
html代码:
<h1 id="anchor">页面标题</h1>
<div id="container">页面内容</div>
<p><a href="#anchor" class="topLink">回到顶端</a></p>

css代码:
#container{
   height: 1000px;
   line-height: 1000px;
   text-align: center;
   font-family: Arial;
   border: 1px solid #EEEEEE;
}

.topLink{
  float:right;
  padding:10px;
  color: #CCC;
}

js代码:
$(document).ready(function() {

	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});

});
分享到:
评论

相关推荐

    jquery 滑动到页面顶端效果

    本篇文章将详细讲解如何利用 jQuery 实现“滑动到页面顶端”的效果,这是一种常见的用户体验优化技术,使得用户可以轻松地返回页面顶部。 首先,我们需要引入 jQuery 库。如果你的项目中还没有引入,可以通过以下...

    jsp页面回到页面顶端

    这种需求催生了"回到页面顶端"的功能,它通常表现为一个固定在页面底部或侧边的按钮,点击后页面瞬间滚动回顶部。本文将详细介绍实现这一功能的几种常见方法。 1. **JavaScript/jQuery方法** JavaScript 或 jQuery...

    jquery回到顶部插件jquery.goup.js

    为了提供更好的用户体验,许多开发者选择引入“返回顶部”功能,使用户只需点击一下,就能快速回到页面的顶端。jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来实现这样的功能。今天我们将深入探讨一款名...

    jQuery实现返回顶部

    // 页面回到顶部,淡出按钮 } }); // 点击按钮,平滑滚动到页面顶部 $('#back-to-top').click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 800); // 800ms内平滑滚动 })...

    jQuery网页下拉滚动表格头部固定在顶端代码

    为了解决这个问题,"jQuery网页下拉滚动表格头部固定在顶端代码" 提供了一种解决方案,它允许表格的头部在用户滚动页面时始终保持在视口的顶部,这样用户就能始终看到列标题,增强可读性和交互性。 首先,这个解决...

    jquery 返回顶端组件

    **jQuery 返回顶端组件详解** 在Web开发中,随着页面内容的增多,用户滚动浏览页面时,经常需要一个方便快捷的方式返回页面顶部。jQuery提供了一种简单的方法来实现这个功能,通常被称为“返回顶部”或“顶部按钮”...

    返回页面顶部,顶端

    标题“返回页面顶部,顶端”和描述中的博文链接暗示了我们将在讨论网页设计中的一个常见功能,即“返回顶部”的按钮或链接。这个功能允许用户快速地将浏览器滚动到页面的开头,通常在页面滚动一定距离后显示。这种...

    scrollup-master

    总结,`Scrollup`是jQuery的一个强大工具,它使得创建“回到页面顶端”功能变得简单而直观。通过灵活的自定义选项,开发者可以轻松地调整按钮样式,以适应不同网站的设计风格。结合其良好的浏览器兼容性和易于使用的...

    回到顶端插件ScrollUp.zip

    标题中的“回到顶端插件ScrollUp.zip”表明这是一个前端开发中的工具,主要用于网站设计,它提供了一个功能,使用户能够方便地返回页面顶部。这个插件可能是基于HTML5、jQuery、JavaScript、CSS这些技术实现的,因此...

    jquery锚点带动画跳转和返回顶部方便定位插件

    5. **返回顶部功能**:许多网站会在页面底部提供一个返回顶部的按钮,方便用户快速回到页面顶端。使用jQuery,我们可以轻松地添加此功能,当用户点击按钮时,页面将平滑滚动回顶部。 6. **插件实现**:这个插件可能...

    特效代码——回到顶端

    在本专题中,我们将深入探讨"回到顶端"特效代码的实现方法。 一、HTML结构 首先,我们需要在页面的适当位置(通常在页面底部)添加一个"回到顶部"的按钮。这个按钮可以用一个简单的`&lt;a&gt;`标签来创建,设置其`href`...

    jquery实现点击页面回到顶部

    a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一...

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

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

    jQuery带QQ客服下拉返回顶部代码.zip

    返回顶部按钮则是为了帮助用户快速回到页面顶部,避免在长页面中频繁滚动。这个功能一般通过监听滚动事件,当页面滚动到一定距离时,按钮显现;当用户点击按钮,页面将使用jQuery的动画效果平滑地滚动到顶部。这种...

    jquery实现跳到底部,回到顶部效果的简单实例(类似锚)

    本文将详细介绍如何使用jQuery库来实现这种效果,即“跳到底部”和“回到顶部”的功能。 首先,我们需要引入jQuery库。在示例代码中,我们可以看到`&lt;script src="jquery-1.4.4.min.js" type="text/javascript"&gt;...

    回到顶端插件ScrollUp特效代码

    "回到顶端插件ScrollUp特效代码"就是专为此目的设计的工具,它利用JavaScript库jQuery来实现,使得用户只需点击一个按钮,就能轻松地将页面滚动回顶部,避免了长篇幅内容浏览时的不便。 ScrollUp插件的核心在于它的...

    基于jQuery的Metro扁平风格网页右侧返回顶部代码,可灵活删减定制展示区块,含QQ咨询代码,兼容主流浏览器.rar

    在网页设计中,为了提供更好的用户体验,经常会在页面滚动到一定程度时出现返回顶部的按钮,以便用户快速回到页面的顶端。这个"基于jQuery的Metro扁平风格网页右侧返回顶部代码"正是实现这一功能的一种解决方案。它...

    基于jquery实现的带返回顶部功能的在线客服网站侧边栏代码.zip

    在网页滚动时,用户可以方便地点击这个功能,快速回到页面的顶端。此功能对于长页面或内容丰富的网站尤其有用,能提升用户体验。 【描述】中的信息与标题相吻合,确认了这是一个用于在线客服的侧边栏代码,同样强调...

    日常收藏的jquery技巧

    4. **回到页面顶端**:定义一个返回页面顶端的链接或按钮,使用`$(document).scrollTo(0, 500);`使页面滚动到顶部。 5. **动态更换CSS样式表**:通过点击事件触发,使用jQuery动态更换网页的样式表链接。 6. **调整...

Global site tag (gtag.js) - Google Analytics