当前位置:首页 > 开发 > 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

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号