欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
网站建设中导航栏栏目在网站內部自动跳转完成
时间: 2021-02-16 21:08 浏览次数:
点一下导航栏栏目在网页页面內部自动跳转;在一般的html文本文档中 ,网页页面內部的锚点自动跳转,大家一般应用 a 标识 ,另外在必须自动跳转到的部位 ,要设定1个

网站建设中导航栏栏目在网站內部自动跳转完成方法


点一下导航栏栏目在网页页面內部自动跳转;
在一般的html文本文档中 ,网页页面內部的锚点自动跳转,大家一般应用 a 标识<a href='#锚点Id'> </a>,另外在必须自动跳转到的部位 ,要设定1个锚点(很形象的了解,渔船出海要停船了,避免漂走,最先要抛下锚大笑),如何设定锚点,对应的元素 id="锚点id",如法1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<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的标红一部分也会产生转变 (这并不是大家要想的)
方式2,在js恶性事件中根据window.location.hash="divId" ,更改# 号后边的 值  但详细地址也会产生转变,觉得跟第1种方式没差别,乃至更不便。
方式3,运用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 转变会碰触路由器自动跳转,因此第3种方式优选,如何写呢?
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            // 寻找锚点
            let anchorElement = document.getElementById(anchorName);
            //假如对应的id锚点存在就自动跳转
            if (anchorElement) {
                anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
            }
        }
<ul&

下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园