平滑滚动到ID

我试图创建一个div，它有一个按钮，点击它会平滑滚动（仅用于审美目的）插入目标。代码：平滑滚动到ID

<!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选项，但支持的唯一浏览器是火狐。这还不够好。所以我一直试图实现jQuery来完成这一部分。我发现一段简单的，每个人都好像是用但一直未能代码搞清楚如何实现：

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

也许这是逻辑或语法，或两者是怎么回事错了，因为我尝试插入它进入我的代码。

来源

2017-06-14 Ryan Steiger

'$（$ .attr（this，“insert2”））'根本看不正确。你想要选择什么？ –

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

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

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

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

来源

2017-06-14 20:40:05 karthick

繁荣！得到它了。谢谢！ –

回答

相关问题