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.我给$（＆＃34; body＆gt; div＆＃34;）;假设您希望使用该特定div而不是整个文档来平滑滚动内容。我把按钮移到了顶部。

平滑滚动到ID

1 个答案: