平滑滚动到 ID

Question

我正在尝试创建一个 div，它有一个按钮，当单击该按钮时，它会平滑滚动（仅出于美观目的）到插入的目标。代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <meta charset="UTF-8">
        <title>Smooth Scrolling DIV</title>
        <style>
            div {
                height: 250px;
                width: 500px;
                overflow: auto;
                border: 2px solid black;
                position: relative;
                top: calc(50vh - 125px);
                left: calc(50vw - 250px);
                margin: 0;
                padding: 0;
            }

            p {
               text-align: center;
               font-family: arial;
               font-size: xx-large;
               margin: 0;
               padding: 0;
            }
            span {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>some text<br>
            some text<br>
            some text<br>
            some text<br>
            some text<br>
            some text<br>
            some text<br>
            some text<br>
            some text<br>
            some text <button id="myButton" onclick="myFunction()">Click</button> <span id="insert2"></span>
            </p>
        </div>
        <script>
            var getInsert2 = document.getElementById("insert2");

            function myFunction() {
                getInsert2.innerHTML = "<br> some more text";
                getInsert2.scrollIntoView({block: "end", behavior: "smooth"});
            }
        </script>
    </body>
</html>

我尝试使用 scrollIntoView 选项，但唯一支持的浏览器是 Firefox。这还不够好。所以我一直在尝试实施 jQuery 来完成那部分。我发现了一段简单的代码，似乎每个人都在使用，但一直无法弄清楚如何实现：

var $root = $("html, body");
$root.animate({
    scrollTop: $( $.attr(this, "insert2") ).offset().top
}, 1000);
return false;
});

当我尝试将其插入我的代码时，可能是逻辑或语法或两者都出错了。

Answer 1

你的目标和触发器在同一行。所以我不确定你是如何测试这个的。

$('#myButton').on('click', function() {
var $root = $("body > div");
$root.animate({
    scrollTop: $('#insert2').offset().top
}, 1000);
});

Fiddle https://jsfiddle.net/u4ecuph2/

备注 1. 我给 $("body > div");假设您想要平滑滚动特定 div 的内容而不是整个文档。 2. 我已经把按钮移到顶部了。

平滑滚动到 ID

Smooth Scrolling to ID

javascript

jquery

smooth-scrolling