如何使用锚标记在 div 内滚动，而不自动滚动整个页面？答案

【问题标题】：How to use anchor tag to scroll within div, without autoscrolling entire page?如何使用锚标记在 div 内滚动，而不自动滚动整个页面？
【发布时间】：2015-07-03 11:51:18
【问题描述】：

我想使用锚标签在网页上的 div 内滚动。但是，当我点击锚标签时，整个页面会跳转到div内的锚标签。

div 内的内容应该滚动，网页正文不会自动滚动。

我已经在谷歌上搜索并试图解决这个问题好几个星期了，但还没有找到一个可以接受的解决方案。这似乎也是一个非常常见的问题。

我对 javascript 知之甚少，但据我所知，似乎有两种可能的方法来实现这一点：

1.使页面的主体只能通过鼠标滚轮/手动滚动，而不是锚标记。这仅适用于正文，不适用于其他元素。

-或-

2.滚动到 div 中的锚标记，并在它影响正文之前取消该过程。

如果它没有将锚标记添加到 url，那将是一个奖励。

这里有一些其他类似问题的链接，可能有一些您可以使用的想法：看起来很有希望，无法让它发挥作用 Scrolling within a div without moving page

使用 event.preventDetfault() 或 event.returnValue = false 锚链接向右滚动后可能适用于正文 http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/

类似问题的其他想法 How to prevent page scrolling when scrolling a DIV element?

How to go to anchor tag in scrollable div without having the whole browser jump down?

How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?

类似问题的其他方法 HTML anchor link with no scroll or jump

这是一个包含相关元素的示例 HTML 和 CSS。您可以调整浏览器窗口的大小，以便主页上有一个滚动条，以查看不受欢迎的自动滚动效果：

<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
<a href="#2">2</a>
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>

这里是 CSS

html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
#right {
background-color: MediumSeaGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
a#link {
float: right;
margin: 0;
padding: 0;
}

也许您可以通过明确回答这个常见问题获得一些分数？

【问题讨论】：

标签： javascript scroll mouseevent anchor page-jump

【解决方案1】：

您可以使用 Jquery 中的 scrollTop 函数来准确定位可滚动 div 的位置。

$( "#viv_button" ).click(function() {
    var container = document.getElementById('col2'); 
    var scrollTo = document.getElementById('viv');
    container.scrollTop = scrollTo.offsetTop;
});

Here is a fiddle of it working
我使用锚标签来定位它，但你可以使用任何带有 ID 的东西。

【讨论】：

有趣。这个 ScrollTop 是否适用于 html 示例？它是两个相邻的 div，一个包含它们的 div，然后是一个窗口 div，一次只显示一个并排的 div。单击左侧 div 中的链接时，它会滚动到右侧 div 中的锚点。唯一的问题是主窗口也会跳转到锚点，只有 div 中的内容应该滚动，否则主体可能会被锁定。是否可以仅使用 JavaScript 来做到这一点？
如果您不使用锚点，它应该可以直接使用 javascript。在JQuery source 中看起来他们正在使用 Javascript 的 scrollTo 方法。
我有一个类似的未解决问题，但不确定是否应该打开一个新问题或尝试通过这个问题解决它。在我继续之前的想法？
为什么总是 jQuery 回答非 jQuey 问题？那些应该被禁止。
@TheFool 确实同意，但这是 2015 年的答案，当时 JQuery 和 Web 开发是同义词

【解决方案2】：

我发现发生这种情况是因为您在其中拥有 href='#id_of_element' 的元素的父级。

要解决这个问题....

// javascript
document.body.position = 'absolute';

// or css
.body {
    position: absolute; 
}

您可以使用固定的或相对的。但这会阻止正文（主页）在子元素中某处选择 href 时滚动。

【讨论】：