• 建网站多少钱欢迎光临易企网站建设公司
    当前位置£º易企网站建设公司 >> 建网站 >> 建网站多少钱 >> 浏览文章

    导航栏目在网站内部跳转实现体例

    发布时间£º2019年04月13日 文章标签£º导航,栏目,在网,网站,站内,内部,跳转,实现,体例 浏览5624

    点击导航栏目在页面内部跳转手机网站制作£»


    在通俗的html文档中 £¬页面内部的锚点跳转£¬我们通常使用 a 标签<a href='#锚点Id'> </a>,同时在必要跳转到的位置 £¬要设置一个锚点£¨很形象的理解£¬渔船出海要停船了模块电源£¬防止漂走£¬首先要抛锚大笑£©£¬怎么设置锚点,对应的元素 id="锚点id",如法一 

     

    <!DOCTYPE html>

    <html lang="zh-en">

    <head>

    <meta charset="utf-8">

    <title>红宝书演习</title>

    <style>

    div{

    width: 100%;

    height: 500px;

    border: 2px solid ;

    background: orange;

    }

    </style>

    </head>

    <body>

    <ul>

    <li><a href="#div1">跳转div1</a></li>

    <li><a href="#div2">跳转div2</a></li>

    <li><a href="#div3">跳转div3</a></li>

    </ul>

      <hr>

      <div id="div1">div1</div>

    <div id="div2">div2</div>

     

    <div id="div3">div3</div>

     

    </body>

    </html>

     

     这种方法的瑕玷 页面的URL 会发生转变  如URL £ºfile:///C:/Users/31295/Desktop/html5&#23454;&#20363;/&#32418;&#23453;&#20070;&#28436;&#20064;.html#div1£¬当点击上方<a>£¬页面内部跳转£¬同时上方URL的标红部分也会发生转变 £¨这不是我们想要的£©

     

     方法二£¬在js事件中通过window.location.hash="divId" £¬改变# 号后面的 值  但地址也会发生转变£¬感觉跟第一种方法没区别£¬甚至更麻烦¡£

     

    方法三广告策划£¬行使Element.scrollIntoView()方法£¬让元素滚动到欣赏器的窗口可视区域电锅炉厂£¬先看下方法对应的参数

     

        element.scrollIntoView(align-top);  // Boolean型参数   element.scrollIntoView()默认参数true;

        element.scrollIntoView(scrollIntoViewOptions);  // Object型参数

     

    1.Element.scrollIntoView() 等同于 Element.scrollIntoView(true)  ?#24067;?#40664;?#29616;µtrue,透露表现元素的顶端和欣赏器可视区域的顶端对齐¡£

     

    2.Element.scrollIntoView(false) 透露表现元素的底端和欣赏器可视区域的底端对齐¡£

     

    scrollIntoViewOptions(Object型参数)

     

        {

            behavior: "auto"  | "instant" | "smooth",

            block:    "start" | "end",

        }

     

    1.block:"start" 相称于true£¬block:"end" 相称于false¡£

     

    2.behavior能控制页面跳转?#30446;?#24930; £¬auto 和instant 都是立即直接跳转到所在锚点£¬不够友爱£¬smooth透露表现平滑过渡到所在锚点¡£

     

    在react应用中£¬因为url 转变会触及路由跳转£¬所以第三种方法优选£¬怎么写呢?

     

        scrollToAnchor = (anchorName) => {

            if (anchorName) {

        

                // 找到锚点

                let anchorElement = document.getElementById(anchorName);

                //假如对应的id锚点存在就跳转

                if (anchorElement) {

                    anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});

                }

            }

     

    <ul>

    <li><a href="#div1">跳转div1</a></li>

    <li><a href="#div2">跳转div2</a></li>

    <li><a href="#div3">跳转div3</a></li>

     

    </ul>

     

    然后在react<a>绑定Onclick事件触发函数即可£¬其中锚点id是要跳转到的锚点对应的Id

     

    <a onClick={() => this.scrollToAnchor('锚点id')}>立即申请</a>

     

    方法四 行使bootstrap 数据监听插件£¬?#37096;?#23454;现平缓跳转¡£

     

     

     

    <ul>

                <li><a src="path1" target="my_iframe"></a></li>

                <li><a src="patp" target="my_iframe"></a></li>

                <li><a src="path3" target="my_iframe"></a></li>

                <li><a src="patp" target="my_iframe"></a></li>

     

    </ul>

     

     

     

    点击导航栏£¬切换iframe内容£»

     

    <iframe name="my_iframe" id="my_frame" src="default" scrolling="no" onload="changeFrameHeight()"></iframe>

     

    <script type="text/javascript">

            function changeFrameHeight(){

                var iframe= document.getElementById("my_iframe");

                iframe.height= 0;   //这里必须要先设置成0£¬不然后面会有题目

                iframe.height=iframe.contentWindow.document.body.scrollHeight;

            }

     

            //监听欣赏器窗口变换£¬这里采用jquery£¬不然在ie中会出现题目

            $(window).resize(function() {

                changeFrameHeight();

            });

     

    </script>


    TAG标签耗时£º0.0042929649353027 秒
    上一篇£º网站建设时网页字体大小限定的解决
    下一篇£º装修装饰行业网站建设方案
    点击数£º  相关搜索£º导航 栏目 在网 网站 站内 内部 跳转 实现 体例
    °²»Õ11Ñ¡5×ßÊÆ