首页手记页面内跳转到指定div的几种方法（锚点、hash、an...

页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）

标签：

JavaScript

页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）

由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求，所以在此分析此类需求可能的解决方案

用a标签的href属性

这是比较常用的一种方法

href。这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。

查资料的时候发现html5中a标签新增download属性，很强大但是兼容性还不够

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>link</title>
    <style>
        .link{
            float: left;
        }
        .target{
            float: left;
        }
        .target ul li{
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="link">
        <a href="#JAMES">1</a>
        <a href="#PAUL">2</a>
        <a href="#HARDEN">3</a>
    </div>
    <div class="target">
        <ul>
            <li id="JAMES">JAMES</li>
            <li id="PAUL">PAUL</li>
            <li id="HARDEN">HARDEN</li>
        </ul>
    </div>
</body>

</html>

缺点：点击跳转后url发生变化，页面刷新后可能有问题

通过window.location.hash

此方法原理与通过a标签的href属性相同，都是根据锚点来实现定位

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css standard</title>
    <style>
        .link {
            float: left;
        }

        .target {
            float: left;
        }

        .target ul li {
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="link">
        <span class="JAMES">JAMES</span>
        <span class="PAUL">PAUL</span>
        <span class="HARDEN">HARDEN</span>
    </div>
    <div class="target">
        <ul>
            <li id="JAMES">JAMES</li>
            <li id="PAUL">PAUL</li>
            <li id="HARDEN">HARDEN</li>
        </ul>
    </div>
    <script>
        window. = function () {
            // 兼容
            function addListener(target, type, handler) {
                if (target.addEventListener) {
                    target.addEventListener(type, handler);
                } else if (target.attachEvent) {
                    target.attach("on" + type, function () {
                        handler.call(target); //让handler中的this指向目标元素
                    });
                } else {
                    target["on" + type] = handler;
                }
            };
            var dom = document.getElementById('link');
            addListener(dom, 'click', function (e) {
                window.location.hash = e.target.className;
            });
        }
    </script>
</body>

</html>

缺点：点击跳转后url发生变化，页面刷新后可能有问题

用scrollTop属性实现

根据元素的scrollTop属性实现，这是之前很常用的一种实现方式，此处不细说。实例借助Jquery实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css standard</title>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <style>
        .link {
            float: left;
        }

        .target {
            float: left;
        }

        .target ul li {
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="link">
        <span id="link1">JAMES</span>
        <span id="link2">PAUL</span>
        <span id="link3">HARDEN</span>
    </div>
    <div class="target">
        <ul>
            <li id="JAMES">JAMES</li>
            <li id="PAUL">PAUL</li>
            <li id="HARDEN">HARDEN</li>
        </ul>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#link").click(function () {
                $("html, body").animate({
                    scrollTop: $("#JAMES").offset().top
                }, { duration: 500, easing: "swing" });
                return false;
            });
            $("#link2").click(function () {
                $("html, body").animate({
                    scrollTop: $("#PAUL").offset().top
                }, { duration: 500, easing: "swing" });
                return false;
            });
            $("#link3").click(function () {
                $("html, body").animate({
                    scrollTop: $("#HARDEN").offset().top
                }, { duration: 500, easing: "swing" });
                return false;
            });
        });
    </script>
</body>

</html>

缺点：如果页面复杂的话，偏移值可能会发生变化需要算法实现，并且脱离Jquery实现代码量会比较大，但是好处就是兼容性好，可行性高

用scrollIntoView实现

先看看用scrollIntoView实现的兼容性

兼容性还不错，关键是实现特别简单，不需要自己计算（偷懒神器）

语法
element.scrollIntoView();
参数

// element.scrollIntoView(Boolean) Boolean型参数
1.如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
2.如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

// element.scrollIntoView(Obj) 型参数
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
// block与Boolean型参数作用相同，behavior参数是决定页面是如何滚动smooth有动画。

这个方法用的时候直接调用就ok，document.getElementById("divId").scrollIntoView();

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>scrollIntoView demo1</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 500px;
		}

		.scroll {
			margin-top: 300px;
			height: 200px;
			background: lightcoral;
		}

		.btn {
			padding: 10px 15px;
			position: fixed;
			right: 0;
			top: 300PX;
			background: rebeccapurple;
			border-radius: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="scroll"></div>
	<div class="btn">click</div>
	<script>
    const btn = document.querySelector('.btn');
    const test = document.querySelector('.scroll');
    btn.addEventListener('click', function() {
      test.scrollIntoView();
    })
	</script>
</body>
</html>

当然，scrollIntoView还接受一个参数，更具体的细节可以参考MDN上的介绍

本文csdn地址

点击查看更多内容