使用 html 滚动到特定的元素

小开

最佳答案

是的，你用这个

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


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

但是这并不能创建一个平滑的卷轴，你知道的。

您还可以添加 CSS

html {
scroll-behavior: smooth;
}

小开

是的，可以通过指定元素的 id属性使用锚，然后使用散列链接到该元素。

例如(取自 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.

小开

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

小开

您应该提到是希望它为 平滑地滚动还是仅仅为跳为一个元素。跳转是很容易的，可以做的只是 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 光滑卷轴或这个片段。(注意: 可能还有更多)。

小开

如果你使用 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>

小开

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


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

此外，您可以添加 html {捲动行为: 平滑; }到您的 CSS，以创建一个平滑的滚动。

小开

 <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>

小开

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/event 启动它，而不必局限于标记。

小开

以上答案都是正确的。但是，代码可能不会给出预期的结果。请允许我补充一些东西，以解释为什么这是非常重要的。

确实，向 html 元素添加捲动行为: 川流不息允许对整个页面进行平滑的滚动。然而，并非所有的网页浏览器都支持使用 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>

小开

如果你想使用一个插件，malihu-custom-scrollbar-plugin，可以做这项工作。它执行 一个真正的卷轴，而不仅仅是一个跳跃。您甚至可以指定滚动的速度/动量。它还允许您设置一个菜单(要滚动到的链接列表) ，根据要滚动到的锚是否在 viewport 中以及其他有用的特性来更改它们的 CSS。

There are demo on the 作者网站 and let our company site serve as a 真实世界的例子 too.

小开

我通过这样做让它工作，考虑到首页是你想要滚动到的元素:

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

小开

下面是一个纯 HTML 和 CSS 方法:)

html {
scroll-behavior: smooth;
/*Adds smooth scrolling instead of snapping to element*/
}


#element {
height: 100px;
width: 100%;
background-color: red;


scroll-margin-block-start: 110px;
/*Adds margin to the top of the viewport*/
  

scroll-margin-block-end: 110pxx;
/*Adds margin to the bottom of the viewport*/
}


#otherElement {
padding-top: 500px;
width: 100%;
}

<a href="#element">Link</a>


<div id="otherElement">Content</a>


<div id="element">
Where you want to scroll
</div>


<div id="otherElement">Content</a>