• QQ登錄

    只需要一步,快速開始

    登錄 立即註冊
  • http://www.wzsvip.net/product/yun
    查看: 1879|回覆: 0

    js怎麼實現鼠標點擊當前頁面某一處後跳轉到指定div部位

    [複製鏈接]
    發表於 2020-9-9 15:29:59 | 顯示全部樓層 |
    在網站建設過程中,有時候會需要做一個這樣的功能,在當前頁面內鼠標點擊某個位置就會直接移動到當前頁面的指定的另一個位置。其實這種功能對於資深程序員來說肯定不是什麼難事,但是對於新手小白而言,卻有一定的難度,主要是不知從何下手。那麼本篇文章就給大家介紹關於js跳轉到頁面指定div位置的兩種方法。
    一、通過html錨點實現:
    如果我們要點擊實現跳轉的地方是一個html錨點,也就是點擊一個A標籤超鏈接實現跳轉,可以把A標籤的href屬性直接指向跳轉指定位置的div,代碼示例如下:
    <a href="#abc">點擊跳轉</a>
    <div id="abc">將要跳轉到這裏</div>



    注意:點擊上面A鏈接將會滾動跳轉到同一頁面中id="abc"的那個div處,需要注意的是跳轉指定位置div的id是唯一的,A標籤直接指向此id,id前面別忘了加上#號。

    二、通過點擊button按鈕實現:
    如果我們要點擊實現跳轉的地方是一個button按鈕的話,由於button不能添加href,所以我們只好使用js跳轉代碼來實現,代碼示例如下<script>
        function onTopClick() {
             window.location.hash = "#abc";
           }
        </script>
        <input  type="button" name="Submit" value="提交"  />
        <div id="abc">js跳轉到頁面指定div位置</div>

    js跳轉到頁面指定div位置


    注意:上述,點擊提交按鈕,將會滾定跳轉定位到同一頁面id="abc"的div處。這段js點擊跳轉頁面代碼實現的原理是:頁面各元素賦予唯一ID,點擊提交按鈕觸發js點擊事件,js通過ID滾動跳轉定位到該元素,window.location.hash = "#abc"指的就是定位到當前頁面id="abc"的div。

    那麼以上所述就是關於div實現局部跳轉頁面的兩種簡單方法,相信儘管是新手小白在看過此篇文章介紹後也會輕鬆的掌握相關知識。





    上一篇:css限制顯示字數,文字長度超出部分用省略號表示 只顯示一行

    積分充值|網絡信息須知|BOB官方比赛資源網 ( 黔ICP備15016750號-8 ) Copyright©2016-2021 YSVIP All Rights Reserved.

    快速回復 返回頂部 返回列表