8

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

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

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

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

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

-或者-

2.滚动到div内的锚标签，在影响body之前取消进程。

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

这里有一些其他类似问题的链接，可能有一些你可以使用的想法：看起来很有希望，无法让它工作 在不移动页面的情况下在 div 内滚动

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

类似问题的其他想法 如何在滚动DIV元素时防止页面滚动？

如何在不让整个浏览器跳下的情况下转到可滚动 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;
display: inline;
}
#right {
background-color: MediumSeaGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
a#link {
float: right;
margin: 0;
padding: 0;
}

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

4

2 回答 2

8

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

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

这是它的工作原理，
我使用锚标签来定位它，但是您可以使用任何带有 ID 的东西。

于 2015-07-03T13:43:15.010 回答
0

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

要解决这个问题......

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

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

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

于 2015-08-23T06:22:27.243 回答