不少jQuery小白不太明白怎么實現(xiàn)點擊一個按鈕或者鏈接芥玉,整個頁面都向下滑動一定距離這個看起來拉風高大上的功能。 其實只需要掌握一個常見的offset和scrollTop方法就可以輕松實現(xiàn)了备图。
下面用簡單的例子來演示一遍吧灿巧!
<a href="#div">點擊這個鏈接</a>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<div id="div">點擊上面的鏈接會移動到這個位置</div>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
這樣簡單的把a標簽的鏈接,直接鏈接到id="div"的元素上揽涮,就可以實現(xiàn)頁面“跳轉(zhuǎn)”
想要下滑的動畫就需要用到強大的jQuery功能了
在以上代碼基礎上加入
$(function(){
$('a').click(function(){
var H = $("#div").offset().top; //用變量獲取元素div塊的高度H
$("body").animate({"scrollTop":H},800);
})
})
這樣就實現(xiàn)了頁面點擊下拉最基本的原理了抠藕,在此基礎上做交互會讓頁面的體驗更好~