Question

html中是否有方法使网页使用HTML滚动到特定元素！？

Answer 1

是的，你使用这个

<a href="#google"></a>

<div id="google"></div>

但这并不能创造一个平滑的卷轴，所以你知道。

Answer 2

您应该提及是否希望顺利滚动或只是跳转到元素。跳跃很容易和可以使用HTML或Javascript完成。最简单的是使用锚点。限制是您要滚动到的每个元素必须具有id。副作用是#theID将附加到URL

<a href="#scroll">Go to Title</a>
<div>
  <h1 id="scroll">Title</h1>
</div>

使用CSS :target选择器单击链接时，可以向目标添加CSS效果。

使用一些基本的JS，你可以做更多，即方法scrollIntoView()。你的元素不需要id，尽管它仍然比较容易，例如。

function onLinkClick() {
  document.getElementsByTagName('h2')[3].scrollIntoView();
  // will scroll to 4th h3 element
}

最后，如果你需要平滑滚动，你应该看一下jQuery的JS Smooth Scroll或this snippet。（注意：可能还有更多）。

Answer 3

将此添加到您的javascript：

$('.smooth-goto').on('click', function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
    return false;
});

另外，请不要忘记将此类添加到您的标记中，如下所示：

<a href="#id-of-element" class="smooth-goto">Text</a>

Answer 4

<!-- HTML -->
<a href="#google"></a>
<div id="google"></div>

/*CSS*/
html { scroll-behavior: smooth; }

此外，您可以添加html {滚动行为：平滑； }添加到CSS上，以平滑滚动。

Answer 5

2020年。现在，我们有了element.scrollIntoView()方法来滚动到特定元素。

HTML

<div id="my_element">
</div>

JS

var my_element = document.getElementById("my_element");

my_element.scrollIntoView({
  behavior: "smooth",
  block: "start",
  inline: "nearest"
});

好事是我们可以从任何onclick /事件中启动此操作，而不必局限于标记。

Answer 6

是的，您可以通过指定元素的id属性然后使用哈希链接到它来使用anchor。

例如（取自W3规范）：

You may read more about this in <A href="#section2">Section Two</A>.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to <A href="#section2">Section Two</A> above
for more details.

Answer 7

我通过这样做得到了它，考虑到首页是您想要滚动到的元素：

document.getElementById("top-page").scrollTo({ behavior: "smooth", top: 0 });

Answer 8

通过在锚标记内使用href属性，您可以使用元素ID名称前面的#将页面滚动到特定元素。

此外，这里有一些jQuery / JS可以完成将变量放入div。

<html>
<body>

Click <a href="#myContent">here</a> to scroll to the myContent section.

<div id="myContent">
...
</div>

<script>
    var myClassName = "foo";

    $(function() {
        $("#myContent").addClass(myClassName);
    });
</script>

</body>

Answer 9

<nav>
  <a href="#section1">1</a> 
  <a href="#section2">2</a> 
  <a href="#section3">3</a>
</nav>
<section id="section1">1</section>
<section id="section2" class="fifty">2</section>
<section id="section3">3</section>

<style>
  * {padding: 0; margin: 0;}
  nav {
    background: black;
    position: fixed;
  }
  a {
    color: #fff;
    display: inline-block;
    padding: 0 1em;
    height: 50px;
  }
  section {
    background: red;
    height: 100vh;
    text-align: center;
    font-size: 5em;
  }

  #section1{
    background-color:green;
  }
  #section3{
    background-color:yellow;
  }

</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
  $(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
  });
</script>

Answer 10

以上答案是正确的。但是，该代码可能无法给出预期的结果。请允许我添加一些内容来解释为什么这很重要。

的确，向html元素添加“ scroll-behavior：smooth”可以平滑地滚动整个页面。但是，并非所有的Web浏览器都支持使用HTML进行平滑滚动。

因此，如果要创建一个所有用户都可以访问的网站，无论他们的Web浏览器是什么，强烈建议使用JavaScript或jQuery之类的JavaScript库来创建适用于所有浏览器的解决方案。

否则，某些用户可能不会喜欢您的网站/平台的平滑滚动。

我可以举一个简单的例子说明如何应用它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

<style>
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
</style>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>

Answer 11

您是否想使用插件malihu-custom-scrollbar-plugin来完成这项工作。它执行实际滚动，而不仅仅是跳转。您甚至可以指定滚动的速度/动量。它还使您可以设置菜单（滚动列表的链接），该菜单的CSS会根据要滚动的锚点是否在视口中以及其他有用的功能进行更改。

author's site上有一个演示，也让我们公司的网站也充当了real-world example。

使用html滚动到特定元素

11 个答案: