HTML 網頁中,經常需要點擊某個文字后跳轉到頁面中的指定位置。這種實現需要使用到 HTML 代碼中的錨點(Anchor)實現。
首先,我們需要在代碼中建立一個錨點。使用下面的代碼:
<a name="target"></a>
注意,這里的 name 屬性和 ID 屬性都可以作為定位符,只是語義上 name 屬性更合適。name 屬性的作用就是為錨點命名一個標志,ID 屬性一般只有用于 JavaScript 操作。
接下來,在需要跳轉到錨點的文字處加上鏈接標簽,并在 href 屬性中填入錨點的名字。使用下面的代碼:
<a href="#target">點我跳到錨點位置</a>
至此,點擊文字就可以跳轉到錨點處了。不過,如果頁面內容滿屏,跳轉過去不易發現,更希望頁面能夠平滑地滾動到錨點位置。這一功能可以使用 JavaScript 實現。下面是一個簡單的 jQuery 實現代碼:
$('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) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
以上就是文字鏈接到指定位置的實現方式,希望對您的網頁設計有所幫助。