我想通过 # 滚动到某个元素:
<a href="#element">Element</a>
<div name="element" />
它很好地完成了这一点，但它到达了元素的最顶部。但是，我希望元素滚动到以用户为中心。
我对使用 Javascript 的 scrollTo 犹豫不决或其他外部库，因为我需要经常(非常非常多)使用此功能。我正在使用 React，不想过度使用 refs并减慢我的应用程序。所以我最好只使用 HTML 来完成此操作。当然，JS 也很好，但是我遇到的大多数解决方案都会修改 DOM 和/或使用 refs .
最佳答案
可能有更好/更清洁的方法来做到这一点，但只有 html/css，我唯一想到的是在 div 元素下使用隐藏的 span，如下所示:
html {
scroll-behavior: smooth;
}
.space {
width: 100%;
height: 400px;
background-color: blue;
}
#element {
position: relative;
top: -50vh;
visibility: hidden;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#element">Element</a>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<div>
<p>
Your element
</p>
<span id="element">anchor </span>
</div>
<div class="space"></div>
</body>
</html>关于javascript - 通过 # 将滚动到元素居中？ (不修改 DOM/使用 refs)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54958643/