jquery執行個體代碼:連結調整平滑滾動效果

來源:互聯網
上載者:User

文章簡介:jquery實現錨點跳轉平滑滾動效果。

<!DOCTYPE html><head><title>jquery實現錨點跳轉平滑滾動效果</title><style type="text/css">body{padding:0; margin:0;}a,a:visited{text-decoration:none; color:#000; cursor:pointer;}a:hover{text-decoration:underline;}#control{position:fixed; top:100px; left:100px;}#control a{font-weight:bold; color:#fff;}#top{width:100%; height:800px; background:red;}#middle{width:100%; height:800px; background:blue;}#bottom{width:100%; height:800px; background:green;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#control a").click(function(){var rel=$(this).attr("rel");var pos=$(rel).offset().top;$("html, body").animate({scrollTop:pos},1000);})})</script></head><body><div id="control"><a rel="#top">頭部</a><br /><a rel="#middle">中部</a><br /><a rel="#bottom">尾部</a><div id="top"><div id="middle"><div id="bottom"></body></html>

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。