Question

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

div中的内容应该滚动，而不会自动滚动网页。

我一直在谷歌搜索，并试图解决这个问题几周＆amp;尚未找到可接受的解决方案。这似乎也是一个非常常见的问题。

我对javascript知之甚少，但从我收集到的内容中，似乎有两种可能的方法来实现这一点：

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

-OR -

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

如果没有将锚标记添加到网址，则可获得奖励。

以下是一些类似问题的其他链接，可能有一些您可以使用的想法：似乎很有希望，无法让它发挥作用 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;
}

也许你可以获得一些积分来明确回答这个常见问题？

Answer 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的任何东西。

Answer 2

我发现这是因为有一个元素的父元素，你的href ='＃id_of_element'。

解决这个问题....

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

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

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

如何使用锚标记在div中滚动，而无需自动滚动整个页面？

2 个答案: