在網頁中,錨點是很常見的一種技術,它可以把用戶導航到頁面的特定部分。而jquery作為一個很流行的JavaScript庫,也自然支持錨點的操作。
在使用jquery設置錨點時,我們通常會使用類似下面的代碼:
$(function(){ $('a[href*=#]').click(function(){ if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); return false; } } }); });以上代碼的作用是,當用戶點擊一個帶有錨點鏈接的a標簽時,頁面滾動到指定的目標元素位置。 然而,在某些情況下,我們希望錨點鏈接不僅可以跳轉到指定位置,還可以隱藏效果,比如在單頁應用中,用戶點擊錨點鏈接后頁面切換,但并不希望用戶看到頁面滾動的效果。 解決這個問題的方法也很簡單,就是把以上代碼中的動畫效果取消掉,只需要將
$('html,body').animate({scrollTop: targetOffset}, 1000);改成
$('html,body').scrollTop(targetOffset);這樣,當用戶點擊錨點鏈接時,頁面會直接跳轉到指定位置,而不帶有滾動的效果,實現了錨點隱藏的效果。