javascript - Scroll to position in fixed div on click -

i trying place number of articles in div, sidemenu titles when clicked scroll relative articles within div. div containing articles in fixed position. there anyway this?

my html looks 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> 

you need use scrolltop function in order scroll fixed div. added overflow:scroll fixed div in order give ability scroll, important functionality.

we offset parent element of each article (offsettop) value set scrolltop to, in order scroll article view. coloured each article effect can 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 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 @ 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 @ sapien lacus. nullam vel lectus facilisis, dictum tortor vel, varius felis. integer quis purus orci. maecenas sagittis, diam 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>