javascript 如何使用锚标签在 div 内滚动，而不自动滚动整个页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31206176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use anchor tag to scroll within div, without autoscrolling entire page?
提问by AxeChops
I would like to use anchor tags to scroll within a div on the webpage. However, when I click on the anchor tag, the entire page jumps to the anchor tag within the div.
我想使用锚标记在网页上的 div 内滚动。但是，当我单击锚标记时，整个页面会跳转到 div 中的锚标记。
The content within the div should scroll, without the body of the webpage autoscrolling.
div 中的内容应该滚动，网页正文不会自动滚动。
I've been googling and trying to figure this out for weeks & have not yet found an acceptable solution. It seems to be a really commonly asked question, too.
数周以来，我一直在谷歌上搜索并试图解决这个问题，但尚未找到可接受的解决方案。这似乎也是一个非常常见的问题。
I know very little about javascript, but from what I gather there seem to be two possible ways of accomplishing this:
我对 javascript 知之甚少，但从我收集的信息来看，似乎有两种可能的方法来实现这一点：
1. To make the body of the page scrollable only by mousewheel/manually and not with anchor tags. This would apply to the body only and not other elements.
1. 使页面主体只能通过鼠标滚轮/手动滚动，而不是使用锚标记。这将仅适用于正文而不适用于其他元素。
-or-
-或者-
2. To scroll to the anchor tag within the div, and cancel the process before it affects the body.
2.滚动到div内的anchor标签，在它影响body之前取消这个过程。
A bonus would be if it did not add the anchor tag to the url.
如果它没有将锚标记添加到 url，那将是一个奖励。
Here are some additional links to similar questions, may have some ideas you could work with: seems promising, could not get it to work Scrolling within a div without moving page
这里有一些类似问题的附加链接，可能有一些您可以使用的想法：看起来很有希望，无法让它工作 在 div 内滚动而不移动页面
uses event.preventDetfault() or event.returnValue = false may work for body after anchor link scroll to right http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/
在锚链接向右滚动后，使用 event.preventDetfault() 或 event.returnValue = false 可能适用于正文 http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-顶上/
other ideas for similar problems How to prevent page scrolling when scrolling a DIV element?
类似问题的其他想法 如何在滚动 DIV 元素时防止页面滚动？
How to go to anchor tag in scrollable div without having the whole browser jump down?
如何在不让整个浏览器跳下来的情况下转到可滚动 div 中的锚标记？
How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
如何区分手动滚动（通过鼠标滚轮/滚动条）和 Javascript/jQuery 滚动？
other approaches to similar question HTML anchor link with no scroll or jump
Here is a sample HTML and CSS with the relevant elements. You may resize the browser window so that there is a scrollbar for the main page to see the undesirable autoscroll effect:
这是带有相关元素的示例 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>
Here is the CSS
这是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;
}
Maybe you can gain some points for definitively answering this commonly asked question?
也许您可以通过明确回答这个常见问题获得一些积分？
回答by Chris
You can use the scrollTopfunction from Jquery to position the scrollable div exactly how you want it.
您可以使用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
I used anchor tags to locate it, but you can use anything with an ID.
这是它的一个小提琴，
我使用锚标签来定位它，但你可以使用任何带有 ID 的东西。
回答by user3094755
I found this occurred because there was a parent of the element within which you have your href='#id_of_element'.
我发现发生这种情况是因为元素的父元素包含您的 href='#id_of_element'。
To fix this....
为了解决这个问题......
// javascript
document.body.position = 'absolute';
// or css
.body {
position: absolute;
}
You could use fixed, or relative. But this stops the body ( main page ) from scrolling on selection of href somewhere within a child element.
您可以使用固定的或相对的。但这会阻止正文（主页）在子元素内某处选择 href 时滚动。
