1. 程式人生 > >html js點擊按鈕滾動跳轉定位到頁面指定位置(DIV)的方法代碼

html js點擊按鈕滾動跳轉定位到頁面指定位置(DIV)的方法代碼

實現 定向 觸發 提交按鈕 a標簽 原理 標簽 baidu 就是

一:通過html錨點實現滾動定位到頁面指定位置(DIV):
如果我們要點擊實現跳轉的地方是一個html錨點,也就是點擊一個A標簽超鏈接實現跳轉,可以把A標簽的href屬性直接指向跳轉指定位置的div,代碼實現思路如下:

<a class="banner" href="/schoolFair/registration#nav">

<a href="#abc">點擊跳轉</a>
<div id="abc">將要跳轉到這裏</div>

二:通過點擊button按鈕使用js實現滾定跳轉到頁面指定位置(DIV):
如果我們要點擊實現跳轉的地方是一個button按鈕的話,由於button不能添加href,所以我們只好使用js跳轉代碼來實現,具體代碼示例如下:
<script>
function onTopClick() {
window.location.hash = "#abc";
}
</script>
<input type="button" name="Submit" value="提交" onclick="javascript:onTopClick();" />
<div id="abc">跳轉到的位置</div>
上面這段代碼,點擊提交按鈕,將會滾定跳轉定位到同一頁面id="abc"的div處。這段js點擊跳轉頁面代碼實現的原理是:頁面各元素賦予唯一ID,點擊提交按鈕觸發js點擊事件,js通過ID滾動跳轉定位到該元素,window.location.hash = "#abc"指的就是定位到當前頁面id="abc"的div。

綜:window.location.href表示重定向,後面跟著的是完整的url地址,與其相似的還有window.location.hash,

下面來比較window.location.href和window.locaiton.hash的區別。

(1)window.location.href

得到和使用的是完整的url,比如window.location.href="www.baidu.com”表示的是重新定向,頁面跳轉

到新的頁面。也可以通過window.location.href得到a標簽的完整的href,比如<a href="#book">如果使用href,那

麽可以得到完整的鏈接(url)

(2)window.location.hash

得到的是錨鏈接。相比如href,通過window.location.hash並不會跳轉到新的鏈接,只會在當前鏈接裏面

改變錨鏈。並且如果有<a href="#book">通過window.location.hash得不到完整的鏈接(URL),僅僅得到#book.

html js點擊按鈕滾動跳轉定位到頁面指定位置(DIV)的方法代碼