我想使用锚标签在网页上的div内滚动.但是,当我单击锚标记时,整个页面会跳转到div中的锚标记.
div中的内容应该滚动,而不会自动滚动网页的主体.
我一直在谷歌搜索并试图解决这个问题几周,还没有找到一个可接受的解决方案.这似乎也是一个非常常见的问题.
我对javascript知之甚少,但从我收集到的内容中,似乎有两种可能的方法来实现这一点:
1.使页面主体只能通过鼠标滚轮/手动而不是锚标签滚动.这仅适用于身体而不适用于其他因素.
-要么-
2.滚动到div中的锚标记,并在它影响正文之前取消该过程.
如果它没有将锚标记添加到网址,则会获得奖励.
这里有一些类似问题的额外链接,可能有一些你可以使用的想法:看起来很有希望,无法让它工作 在div中滚动而不移动页面
使用event.preventDetfault()或event.returnValue = false可以在锚链接滚动到右边后用于正文 http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-到的顶/
类似问题的其他想法 如何在滚动DIV元素时阻止页面滚动？
如何区分手动滚动(通过鼠标滚轮/滚动条)与Javascript/jQuery滚动？
类似问题的其他方法 HTML锚链接没有滚动或跳转
这是一个包含相关元素的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; …