js scrollIntoView

最新推荐文章于 2025-01-08 22:19:00 发布

原创最新推荐文章于 2025-01-08 22:19:00 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种利用scrollIntoView()函数实现网页元素滚动到视口顶部的方法，并通过一个HTML示例展示了如何通过按钮点击使指定元素回到页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人觉得可通过  scrollIntoView()函数实现网页返回顶部的功能；

<html>
<head>
    <title>HTML5_ScrollInToView方法</title>
    <meta  charset="utf-8">
    <style>
        #begin{
            width: 100%;
            height: 100%;
            background: pink;


        }
        #box{
            width: 100%;
            height: 800px;
            background: #000;
            border:1px solid black;
        }
    </style>
</head>
<body>

<input id="btn2" type="button" value="false" onclick="falseScrollIntroview()">
<div id="begin">

</div>
<div id="box"></div>
<input id="btn1" type="button" value="ture" onclick="trueScrollIntroview()">
<script>
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    var box=document.getElementById("box");
    var begin=document.getElementById("begin");

    function trueScrollIntroview() {
        begin.scrollIntoView(true);
    }
    function falseScrollIntroview() {
        box.scrollIntoView(false);
    }

//    var box=document.querySelector("#box");
//    box.style.height="300px";
</script>
</body>
</html>