使用 html 滚动到特定元素答案

【问题标题】：Scroll to a specific Element Using html使用 html 滚动到特定元素
【发布时间】：2014-09-04 12:32:30
【问题描述】：

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

【问题讨论】：

您是否专门询问 HTML 从而排除了 Javascript？
如果页面在发送到浏览器之前植入了 id、div-head 或 name 就可以了。但是，如果那里绝对没有任何条目标记，而您只想直接引用特定文本，您可以这样做吗？是否可以从外部触发浏览器的搜索功能（Ctrl+F），无需用户干预？
检查参考：w3schools.com/jsref/…

标签： html css

【解决方案1】：

是的，你用这个

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

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

但这并不会像您所知的那样创建平滑的滚动。

你也可以添加你的 CSS

html {
  scroll-behavior: smooth;
}

【讨论】：

谢谢，我很感激但是我们可以在 div 标签中放一个变量吗？
可以用js在div标签里面放一个变量。你也可以使用 PHP。
变量？你能解释一下吗？
是的，如果这就是您要寻找的，那么 Nicolas 在回答您的问题时发布的内容。虽然如果您可以访问 PHP，我建议您使用它。如果你想创建一个搜索查询来跳转到页面中的某个元素，你只需要一些小的 JS
更新了我的帖子，举了一个使用 JS 将变量放入 div 的示例。

【解决方案2】：

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

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

另外，你可以添加 html { scroll-behavior: smooth; } 添加到您的 CSS 以创建平滑滚动。

【讨论】：

此方法在页脚下创建额外的白色区域并在我的代码中隐藏导航栏
这个答案和接受的答案有什么区别？

【解决方案3】：

您应该提及您是希望它平滑滚动还是简单地跳转到一个元素。跳跃很容易，只需使用 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
}

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

【讨论】：

在生产中使用Element.scrollIntoView()之前仔细检查浏览器兼容性表link
如果您偶然使用版本> 1的角度，请参阅此答案以获得平滑滚动Angular smooth scroll
你不需要库或 jQuery 来平滑滚动。 Chrome 和 Firefox 支持scrollIntoView({ behavior: 'smooth' })Source
@Nifel 你 7 年前做过（当我写这个答案时）。但你说得对，我应该更新它

【解决方案4】：

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/事件中启动它，而不必局限于标签。

【讨论】：

我不会说 2020 年，因为自 2005 年以来，滚动视图一直是实验性的并开始工作

【解决方案5】：

如果您使用Jquery，您可以将其添加到您的javascript：

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

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

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

【讨论】：

【解决方案6】：

 <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;
      }
      html {
        scroll-behavior: smooth;
      }
      #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>

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

是的，您可以通过指定元素的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.

【讨论】：

【解决方案9】：

通过在锚标记内使用 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>

【讨论】：

【解决方案10】：

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

author's site上有demo，让我们公司网站也可以作为real-world example。

【讨论】：

【解决方案11】：

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

确实，在 html 元素中添加 scroll-behavior:smooth 可以让整个页面平滑滚动。然而，并非所有的网络浏览器都支持使用 HTML 进行平滑滚动。

因此，如果您想创建一个可供所有用户访问的网站，无论他们的网络浏览器如何，强烈建议使用 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>

【讨论】：