当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery回到页面顶端

发表于: 2013-07-11   作者:知了ing   来源:转载   浏览:
摘要: html代码: <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
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回到页面顶端

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
日期:2013-4-17 来源:GBin1.com 在线演示 Scrollup是一款jQuery的“回到页面顶端”的插件,能够帮
日期:2013-4-17 来源:GBin1.com 在线演示 Scrollup是一款jQuery的“回到页面顶端”的插件,能够帮
<html> <head> <title>“回到顶端”按钮实现</title> <script type="te
一.jQuery代码: 首先使用window对象的scroll回调函数来控制当页面向下滚动超过150px的时候,显示ba
有没有见过很多在页面的右下角有个【回到顶端】的悬浮东东,并且在开始时没有,一移动滚动条就出现
参加编程小挑战,赢取超时尚且超时用卫衣! 挑战要求: 参考给定的HTML,使用jQuery和相关CSS生成页
日期:2013-3-26 来源:GBin1.com 之前的文章中我们曾发表过另外一个back to top的插件 :jQuery Ba
日期:2013-3-26 来源:GBin1.com 在线演示 之前的文章中我们曾发表过另外一个back to top的插件 :
发一下牢骚和主题无关: 日期:2013-3-26 源来:GBin1.com 之前的文章中我们曾宣布过另外一个back t
插件描述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部。 使用方法非常简单 引
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号