网站制作中导航栏目在网站内部跳转实现方式-新闻资讯-太仓网站建设-小程序制作_网络公司

网站制作中导航栏目在网站内部跳转实现方式！

发布于 2022-06-07 16:00:12 阅读（）

点一下导航栏频道在网页页面内部结构自动跳转；
在平常的html文本文档中，网页页面内部结构的关键帧自动跳转，大家通常应用 a 标识 <a href='#关键帧Id'> </a>,与此同时在必须自动跳转到的部位，要设定一个关键帧（很形像的了解，木船开船要停船了，避免漂走，最先要抛下锚哈哈大笑），如何设置关键帧,相匹配的原素 id="关键帧id",如法一
<!DOCTYPE html>
<html>
<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案例/红宝书训练.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) 也即初始值true,表明原素的顶部和电脑浏览器可视性地区的顶部两端对齐。
2.Element.scrollIntoView(false) 表明原素的底部和电脑浏览器可视性地区的底部两端对齐。
scrollIntoViewOptions(Object型主要参数)
    {
        behavior: "auto" | "instant" | "smooth",
        block:    "start" | "end",
    }
1.block:"start" 等同于true，block:"end" 等同于false。
2.behavior能操纵页面跳转的速度，auto 和instant 全是马上立即转跳到所属关键帧，不足友善，smooth表明光滑衔接到所属关键帧。

在react运用中，因为url 转变会碰触路由跳转，因此第三种方式甄选，要怎么写呢?
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            // 寻找关键帧
            let anchorElement = document.getElementById (anchorName);
            //假如相应的id关键帧存有就自动跳转
            if (anchorElement) {
                anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
            }
        }
<ul&

公司网站建设网站后台制作注意的问题

降低网站跳出率的方法有哪些

新闻资讯

太仓企业网站建设是选择价格还是选择性能 TOP1

网站制作中导航栏目在网 站内部跳转实现方式！

相关阅读

新闻资讯

网站制作中导航栏目在网站内部跳转实现方式！