Scroll to position in fixed div on click

Question

I am trying to place a number of articles in a div, with a sidemenu with titles that when clicked will scroll to their relative articles within the div. However the div containing the articles is in fixed position. Is there anyway to do this?

My HTML looks something like this:

<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

You need to use the scrollTop function in order to scroll the fixed div. I added overflow:scroll to the fixed div in order to give it the ability to scroll, which is important for this functionality.

We then get the offset from the parent element of each article ( offsetTop ) as the value to set the scrollTop to, in order to scroll the article into view. I coloured each article just so that the effect can easily be seen.

 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>