自拍亚洲一区欧美另类,亚洲成人影院,亚洲午夜久久久久妓女影院,最近中文字幕高清中文字幕无,亚洲熟妇av一区二区三区漫画

互聯(lián)網(wǎng)知識

精準傳達 ? 價值共享

洞悉互聯(lián)網(wǎng)前沿資訊，探尋網(wǎng)站營銷規(guī)律

4種方法實現(xiàn)html 頁面內(nèi)錨點定位及跳轉(zhuǎn)

作者：狐靈科技 | 2022-05-12 14:49 |點擊：

項目中經(jīng)常會出現(xiàn)點擊跳轉(zhuǎn)錨點的方法，比如給一個a標簽一個href=“#錨點”，然后要跳的錨點給個id=“錨點”，這樣就實現(xiàn)簡單的跳轉(zhuǎn)，但是這樣在url地址欄后面都會出現(xiàn)一個諸如www.geekjc.com/#錨點，然后你點擊給一次后退都是退回上一個選擇的錨點url，這里總結(jié)4個跳轉(zhuǎn)錨點的方法。

第一種方法

  • 也是最簡單的方法是錨點用標簽，在href屬性中寫入div的id。如下：
<style>  
    div {  
        height: 800px;  
        width: 400px;  
        border: 2px solid black;  
    }  
    h2 {  
        position: fixed;  
        margin:50px 500px;  
    }  
</style>  
  
  
<h2>  
    <a href="#div1">to div1</a>  
    <a href="#div2">to div2</a>  
    <a href="#div3">to div3</a>  
</h2>  
    <div id="div1">div1</div>  
    <div id="div2">div2</div>  
    <div id="div3">div3</div>

這種方法的缺點是點擊錨點之后，瀏覽器的URL會發(fā)生變化，如果刷新可能會出現(xiàn)問題?！?/p>

第二種方法

  • 是在js事件中通過
  window.location.hash="divId"
  • 跳轉(zhuǎn)，但地址也會發(fā)生變化，感覺跟第一種方法沒區(qū)別，甚至更麻煩。

第三種方法

  • 是用animate屬性，當點擊錨點后，頁面滾動到相應(yīng)的DIV。接著上面的代碼，具體添加如下代碼：
$(document).ready(function() {
    $("#div1Link").click(function() {
        $("html, body").animate({
            scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
            return false;
    });
    $("#div2Link").click(function() {
        $("html, body").animate({
        scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#div3Link").click(function() {
        $("html, body").animate({
        scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
});

注意：運行上面的腳本的之前，先將為錨點增加相應(yīng)的id，同時去掉href屬性。　　　 $("html, body")可以替換為響應(yīng)的div，如果不起作用，試著給該div增加overflow：scroll屬性。 另外，腳本可以進一步優(yōu)化，自己來試試 這樣做的好處是：URL地址不會變，同時點擊錨點時會自動響應(yīng)scroll事件，不需要重新綁定。 缺點是：如果頁面復(fù)雜的話，偏移值可能會發(fā)生變化需要算法輔助。

第四種方法

  • 是用js的srollIntoView方法，直接用:
document.getElementById("divId").scrollIntoView();

比如：

document.querySelector("#roll1").onclick = function(){
      document.querySelector("#roll1_top").scrollIntoView(true);
}
  • 這里就是點擊id是#roll1的元素可以滾動到id是#roll1_top的地方，這里的#roll1和#roll1_top最好是一一對應(yīng)的， 這種方法的好處，是URL不會變，同時能夠響應(yīng)相應(yīng)的scroll事件，不需要算法什么的。代碼如下：
<html>
    <head>
        <title>HTML5_ScrollInToView方法</title>
        <meta  charset="utf-8">
        <style type="text/css">
            #myDiv{
                height:900px;
                background-color:gray;

            }
            #roll_top{
                height:900px;
                background-color:green;
                color:#FFF;
                font-size:50px;
                position:relative;
            }
            #bottom{
                position:absolute;
                display:block;
                left;0;bottom:0;
            }
        </style>
    </head>
    <body>
        <button id="roll1">scrollIntoView(false)</button>
        <button id="roll2">scrollIntoView(true)</button>
        <div id="myDiv"></div>
        <div id="roll_top">
            scrollIntoView(ture)元素上邊框與視窗頂部齊平
            <span id="bottom">scrollIntoView(false)元素下邊框與視窗底部齊平</span>
        </div> 
    </body>
</html>
復(fù)制代碼
  • javascript部分
window.onload = function(){
    /*
        如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題，瀏覽器實現(xiàn)了一下方法，
    以方便開發(fā)人員如何更好的控制頁面的滾動。在各種專有方法中，HTML5選擇了scrollIntoView()
    作為標準方法。
        scrollIntoView()可以在所有的HTML元素上調(diào)用，通過滾動瀏覽器窗口或某個容器元素，
    調(diào)用元素就可以出現(xiàn)在視窗中。如果給該方法傳入true作為參數(shù)，或者不傳入任何參數(shù)，那么
    窗口滾動之后會讓調(diào)動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數(shù)，調(diào)用元素
    會盡可能全部出現(xiàn)在視口中（可能的話，調(diào)用元素的底部會與視口的頂部齊平。）不過頂部
    不一定齊平，例如：
    //讓元素可見
    document.forms[0].scrollIntoView();
    當頁面發(fā)生變化時，一般會用這個方法來吸引用戶注意力。實際上，為某個元素設(shè)置焦點也
    會導(dǎo)致瀏覽器滾動顯示獲得焦點的元素。
        支持該方法的瀏覽器有 IE、Firefox、Safari和Opera。
    */

    document.querySelector("#roll1").onclick = function(){
        document.querySelector("#roll_top").scrollIntoView(false);
    }
    document.querySelector("#roll2").onclick = function(){
        document.querySelector("#roll_top").scrollIntoView(true);
    }
}

綜上4種方法，第四種是最值得推薦的。


如沒特殊注明，文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請注明?? "4種方法實現(xiàn)html 頁面內(nèi)錨點定位及跳轉(zhuǎn)
相關(guān)推薦
多一份免費策劃方案，總有益處。

請直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢

網(wǎng)站設(shè)計 品牌營銷

多一份參考，總有益處

聯(lián)系狐靈科技，免費獲得專屬《策劃方案》及報價

咨詢相關(guān)問題或預(yù)約面談，可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線：15082661954 / 大客戶專線：15523356218

關(guān)于狐靈科技

+

狐靈致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括 網(wǎng)站建設(shè)、 SEO優(yōu)化、移動互聯(lián)網(wǎng)營銷、高端網(wǎng)站建設(shè)、高端網(wǎng)站設(shè)計、品牌網(wǎng)站定制開發(fā)、營銷策劃推廣電子商務(wù)、移動互聯(lián)網(wǎng)營銷、 為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，我們將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供一體化全方位的互聯(lián)網(wǎng)品牌整合方案！

我們的優(yōu)勢

量身打造個性化網(wǎng)站制作

代碼深度符合SEO優(yōu)化

一站式企業(yè)網(wǎng)站建設(shè)服務(wù)

前沿視覺設(shè)計、研發(fā)能力

重慶網(wǎng)站建設(shè)公司

多項網(wǎng)站設(shè)計傳播大獎

營銷型網(wǎng)站建設(shè)專家

自主研發(fā)網(wǎng)站管理系統(tǒng)

B2C電商網(wǎng)站建設(shè)供應(yīng)商

完善的售后服務(wù)體系

我們的不同

+

在我們的對手消耗大量的時間停留在碎片化的互聯(lián)網(wǎng)設(shè)計或者程序?qū)崿F(xiàn)的時候，我們已經(jīng)開始把數(shù)字化品牌建設(shè)和網(wǎng)絡(luò)傳播進行了整合。我們提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、創(chuàng)意表現(xiàn)、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站運營反饋建議等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,為所有謀求長遠發(fā)展的企業(yè)品牌貢獻全力！

公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業(yè)務(wù)熱線：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權(quán)所有 | 渝ICP備19005721號-1

專業(yè)團隊為您提供 重慶網(wǎng)頁設(shè)計, 品牌網(wǎng)站設(shè)計,營銷型網(wǎng)站制作,SEO優(yōu)化關(guān)鍵詞排名推廣等服務(wù),建網(wǎng)站就找狐靈科技！ | TAG標簽 | 網(wǎng)站建設(shè)地圖 | 網(wǎng)站地圖