Element.scrollIntoView()

最新推荐文章于 2023-04-07 11:22:32 发布

. . . . .

最新推荐文章于 2023-04-07 11:22:32 发布

阅读量86

点赞数

分类专栏：前端开发文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/128751680

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

在这里插入图片描述

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>  <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
    </div>
    <div class="bottom" style="height: 20px;border:1px solid #f00;"></div>
    <button class="top">点击</button>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?
        <br>
        
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate saepe enim nulla nobis provident quaerat tempore. Adipisci voluptatem velit optio voluptatum, id laborum perferendis cumque! Iste sint sit blanditiis eaque?

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde eligendi vitae dolorum placeat harum soluta nihil minus reiciendis nulla, fuga explicabo optio. Dolorum ut magnam laborum exercitationem? Non, distinctio accusamus.
    </div>
 
    <script>
        var btn = document.querySelector('.top');
        btn.addEventListener('click', function() {
            var element = document.querySelector('.bottom')
            // 元素的顶端将和其所在滚动区的可视区域的顶端对齐
            element.scrollIntoView(true);
        })
    </script>
</body>
</html>
</body>
</html>