NOT simple anchors. How to implement?

Question

Good day! There are two different blocks. In one block .chart - links, in another block .list - anchors. It is .list to realize the following: so that when you click on a link in a .chart block, the .list block scrolls to the desired anchor. Help me please. Thank you

 !function($){ $(document).on('click', 'a[href^=#]', function () { $('.list').animate({ scrollTop: $('div[data-id="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); return false; }); }(jQuery);

 body {color: black;} .chart { display: block; overflow: hidden; position: fixed; top: 0; left: 0; background-color: blue; border: 1px solid black; width: 20%; } .char { display: block; background-color: yellowgreen; border: 1px solid black; margin: 15px 5px; } .list { display: block; overflow-y: scroll; float: right; background-color: green; border: 1px solid black; width: 200px; height: 200px; } .lis { display: block; height: 30px; background-color: red; border: 1px solid black; margin: 0 5px; } .pp { display: block; width: 5px; height: 350px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chart"> <a href="#aaa"><div class="char">a</div></a> <a href="#bbb"><div class="char">b</div></a> <a href="#ccc"><div class="char">c</div></a> <a href="#ddd"><div class="char">d</div></a> <a href="#eee"><div class="char">e</div></a> </div> <div class="list"> <div class="pp"></div> <div data-id="aaa" class="lis">aaa</div> <div class="pp"></div> <div data-id="bbb" class="lis">bbb</div> <div class="pp"></div> <div data-id="ccc" class="lis">ccc</div> <div class="pp"></div> <div data-id="ddd" class="lis">ddd</div> <div class="pp"></div> <div data-id="eee" class="lis">eee</div> <div class="pp"></div> </div>

roni roni 2,109 3 7 · Accepted Answer · 2016-10-15T11:50:48

Option ...

 !function($) { $(document).on('click', 'a[href^=#]', function(event) { event.preventDefault(); var top = $('.list div[data-id="' + $(this).attr("href").slice(1) + '"]')[0].offsetTop - 5; $('.list').animate({ scrollTop: top }, 1000); }); }(jQuery);

 body { color: black; } .chart { display: block; overflow: hidden; position: fixed; top: 0; left: 0; background-color: blue; border: 1px solid black; width: 20%; } .char { display: block; background-color: yellowgreen; border: 1px solid black; margin: 15px 5px; } .list { display: block; overflow-y: scroll; float: right; background-color: green; border: 1px solid black; width: 200px; height: 200px; } .lis { display: block; height: 30px; background-color: red; border: 1px solid black; margin: 0 5px; } .pp { display: block; width: 5px; height: 350px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chart"> <a href="#aaa"> <div class="char">a</div> </a> <a href="#bbb"> <div class="char">b</div> </a> <a href="#ccc"> <div class="char">c</div> </a> <a href="#ddd"> <div class="char">d</div> </a> <a href="#eee"> <div class="char">e</div> </a> </div> <div class="list"> <div class="pp"></div> <div data-id="aaa" class="lis">aaa</div> <div class="pp"></div> <div data-id="bbb" class="lis">bbb</div> <div class="pp"></div> <div data-id="ccc" class="lis">ccc</div> <div class="pp"></div> <div data-id="ddd" class="lis">ddd</div> <div class="pp"></div> <div data-id="eee" class="lis">eee</div> <div class="pp"></div> </div>

roni everything works as I needed. Thank you so much for your help! Good luck! - LADYX

Answer 2 · 2016-10-15T10:31:21

 $(document).on('click', 'a[href^=#]', function() { $('.list').scrollTop(0) var x =$('.list div[data-id="' + $(this).attr("href").slice(1) + '"]').position().top; $('.list').animate({ scrollTop: x }, 1000); });

 body { color: black; } .chart { display: block; overflow: hidden; position: fixed; top: 0; left: 0; background-color: blue; border: 1px solid black; width: 20%; } .char { display: block; background-color: yellowgreen; border: 1px solid black; margin: 15px 5px; } .list { position: relative; display: block; overflow-y: scroll; float: right; background-color: green; border: 1px solid black; width: 200px; height: 200px; } .lis { position: absolute; display: block; height: 30px; background-color: red; border: 1px solid black; margin: 0 5px; } .pp { display: block; width: 5px; height: 350px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chart"> <a href="#aaa"> <div class="char">a</div> </a> <a href="#bbb"> <div class="char">b</div> </a> <a href="#ccc"> <div class="char">c</div> </a> <a href="#ddd"> <div class="char">d</div> </a> <a href="#eee"> <div class="char">e</div> </a> </div> <div class="list"> <div class="pp"></div> <div data-id="aaa" class="lis">aaa</div> <div class="pp"></div> <div data-id="bbb" class="lis">bbb</div> <div class="pp"></div> <div data-id="ccc" class="lis">ccc</div> <div class="pp"></div> <div data-id="ddd" class="lis">ddd</div> <div class="pp"></div> <div data-id="eee" class="lis">eee</div> <div class="pp"></div> </div>

UPD:

 var obj ={ "eee" : $('.list div[data-id="eee"]').position().top + $('.list div[data-id="eee"]').height() - 100, "ccc" : $('.list div[data-id="ccc"]').position().top + $('.list div[data-id="ccc"]').height() - 100, "ddd" : $('.list div[data-id="ddd"]').position().top + $('.list div[data-id="ddd"]').height() -100, "aaa" : $('.list div[data-id="aaa"]').position().top + $('.list div[data-id="aaa"]').height() - 100, "bbb" : $('.list div[data-id="bbb"]').position().top + $('.list div[data-id="bbb"]').height() - 100 }; $(document).on('click', 'a[href^=#]', function() { var x = obj[$(this).attr("href").slice(1)]; $('.list').animate({ scrollTop: x }, 1000); });

 body { color: black; } .chart { display: block; overflow: hidden; position: fixed; top: 0; left: 0; background-color: blue; border: 1px solid black; width: 20%; } .char { display: block; background-color: yellowgreen; border: 1px solid black; margin: 15px 5px; } .list { position: relative; display: block; overflow-y: scroll; float: right; background-color: green; border: 1px solid black; width: 200px; height: 200px; } .lis { position: absolute; display: block; height: 30px; background-color: red; border: 1px solid black; margin: 0 5px; } .pp { display: block; width: 5px; height: 350px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chart"> <a href="#aaa"> <div class="char">a</div> </a> <a href="#bbb"> <div class="char">b</div> </a> <a href="#ccc"> <div class="char">c</div> </a> <a href="#ddd"> <div class="char">d</div> </a> <a href="#eee"> <div class="char">e</div> </a> </div> <div class="list"> <div class="pp"></div> <div data-id="aaa" class="lis">aaa</div> <div class="pp"></div> <div data-id="bbb" class="lis">bbb</div> <div class="pp"></div> <div data-id="ccc" class="lis">ccc</div> <div class="pp"></div> <div data-id="ddd" class="lis">ddd</div> <div class="pp"></div> <div data-id="eee" class="lis">eee</div> <div class="pp"></div> </div>

Only one moment: when you click on the next link, the block .list scrolls to its original position, upward, then to the desired anchor.
from anchor to anchor, bypassing the prerequisite of scrolling the block up.
C.Raf.T. The second option is too voluminous for me, because there will be many such links to anchors, and everything will have to be listed, not an option.
In addition, please note that scrolling works without flushes, but for some reason it stops at the center of the vertical of the block, and not at the top.

NOT simple anchors. How to implement?

2 answers 2

More articles: