Question

我正在尝试在div中放置一些文章，其中带有标题的sidemenu在点击时会滚动到div中的相关文章。然而，包含物品的div处于固定位置。反正有吗？

我的HTML看起来像这样：

<ul>
    <li><a href="#1>Article 1</a></li>
    <li><a href="#2>Article 2</a></li>
    <li><a href="#3>Article 3</a></li>
    <li><a href="#4>Article 4</a></li>
</ul>
<div style="position:fixed; right:0px; bottom:0px; width:200px; height:200px;">
    <div id="1">abcdefg</div>
    <div id="2">hijklmn</div>
    <div id="3">opqestu</div>
    <div id="4">vwxyzab</div>
</div>

Answer 1

您需要使用scrollTop功能才能滚动固定的div。我将overflow:scroll添加到固定div中以使其具有滚动功能，这对此功能非常重要。

然后我们从每篇文章的父元素（offsetTop）获取偏移量作为设置scrollTop的值，以便将文章滚动到视图中。我为每篇文章着色，以便很容易看到效果。

var scrollToArticle = function(id) {
  document.getElementById('articles').scrollTop = document.getElementById(id).offsetTop;
};

<ul>
    <li><a href="#" onclick="scrollToArticle('1')">Article 1</a></li>
    <li><a href="#" onclick="scrollToArticle('2')">Article 2</a></li>
    <li><a href="#" onclick="scrollToArticle('3')">Article 3</a></li>
    <li><a href="#" onclick="scrollToArticle('4')">Article 4</a></li>
</ul>
<div id="articles" style="position:fixed; right:0px; bottom:0px; width:200px; height:200px; overflow: scroll">
    <div id="1" style="background: red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus mauris vitae ullamcorper tincidunt. Nullam mollis lobortis auctor. Maecenas consequat odio vel sem commodo tempor. Sed ut ligula sapien. Proin posuere leo in faucibus venenatis. Suspendisse in imperdiet sem. Praesent nibh est, lobortis fermentum sem ac, dignissim tempor lorem. Praesent sed tincidunt lacus. Proin convallis tempus risus, ut dignissim eros vehicula at. Nulla egestas tincidunt sagittis.</div>
    <div id="2" style="background: yellow">Sed blandit sit amet diam id laoreet. Morbi et tempor sem. Quisque eleifend imperdiet leo mollis fringilla. Aenean non odio sem. Sed cursus iaculis mattis. Nullam faucibus ornare neque, non consequat massa ornare sed. Pellentesque id turpis vel leo ornare varius a accumsan ipsum. Ut eget vehicula quam, quis posuere lacus. Aenean blandit libero in libero fermentum, id efficitur elit lobortis. Morbi enim dui, mollis vel imperdiet ac, ullamcorper at leo. Maecenas euismod eleifend purus, vestibulum convallis dui. Aliquam sapien justo, condimentum quis auctor et, condimentum non odio.</div>
    <div id="3" style="background: blue">Pellentesque eget faucibus orci. Fusce in elit dui. Aliquam aliquam quam sed purus ultrices malesuada. Duis eget mattis enim. Pellentesque tincidunt est ut posuere fermentum. Nulla lorem lorem, lobortis id mollis id, varius vehicula nunc. Proin id euismod tellus. In id mauris in erat dignissim pharetra eget sit amet tellus. Integer malesuada dolor tellus, tempus placerat turpis tincidunt auctor. Aenean eget semper lorem, ac elementum ligula. Phasellus turpis justo, imperdiet in eros vitae, egestas cursus nisi. In imperdiet velit felis.</div>
    <div id="4" style="background: green">In at sapien lacus. Nullam vel lectus facilisis, dictum tortor vel, varius felis. Integer quis purus orci. Maecenas sagittis, diam a ullamcorper venenatis, nibh augue scelerisque turpis, ut feugiat metus dolor nec leo. Phasellus in laoreet lectus, id hendrerit velit. Sed eu interdum erat. Integer mi arcu, condimentum ac sapien non, congue sollicitudin purus. Integer ut fringilla ipsum.</div>
</div>

单击时滚动到固定div中的位置

1 个答案: