平滑滚动到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);
});

小提琴https://jsfiddle.net/u4ecuph2/

注意1.我给$（“ body> div”）; 假设您要使用该特定div而不是整个文档来平滑滚动内容。 2.我已将按钮移到顶部。