jQuery - ScrollTop and On.Click not working
Question
At the moment, I am learning how to write in javascript and jquery.I wrote a simple jquery code where you have a navigation menu which on click it is scrolling to a specific div inside an overflow container. However, the scroll function is not working. If someone can help me I am going to be really grateful. Thank you in advance.
My Code:
$(document).ready(function() { $("#Anchor_A").on('click', function() { $('.Container').animate({ scrollTop: $("#Box_A").offset().top }, 'slow'); }); $("#Anchor_B").on('click', function() { $('.Container').animate({ scrollTop: $("#Box_B").offset().top }, 'slow'); }); $("#Anchor_C").on('click', function() { $('.Container').animate({ scrollTop: $("#Box_C").offset().top }, 'slow'); }); $("#Anchor_D").on('click', function() { $('.Container').animate({ scrollTop: $("#Box_D").offset().top }, 'slow'); }); $("#Anchor_E").on('click', function() { $('.Container').animate({ scrollTop: $("#Box_E").offset().top }, 'slow'); }); });
.Wrapper{ display:flex; position:relative; width:90vw; height:90vh; background-color:purple; } .Menu{ position:relative; width:10vw; height:90vh; background-color:blue; } .Menu li{ position:relative; font-size:4vw; line-height:5vw; text-align:center; color:white; cursor:pointer; list-style-type: none; } .Container{ position:relative; width:80vw; height:90vh; background-color:red; overflow-y:hidden; } .Box{ position:relative; width:80vw; height:90vh; background-color:purple; cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Wrapper"> <div class="Menu"> <li id="Anchor_A">A</li> <li id="Anchor_B">B</li> <li id="Anchor_C">C</li> <li id="Anchor_D">D</li> <li id="Anchor_E">E</li> </div> <div class="Container"> <div class="Box" id="Box_A"> Box A </div> <div class="Box" id="Box_B"> Box B </div> <div class="Box" id="Box_C"> Box C </div> <div class="Box" id="Box_D"> Box D </div> <div class="Box" id="Box_E"> Box E </div> </div> </div>
Best regards,
George S.
1 answers
solution1
2 ACCPTED 2016-04-23 19:06:43
The key point here is that you need to use position() but not the offset() method. The offset() method returns coordinates relative to the document.
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
However you are trying to scroll them inside a container. See the implementation:
Note 1: I've optimized code a bit so instead of multiple similar blocks data-target attribute is used to define which block scroll to.
Note 2: the position() method returns coordinates from left top corner of the container. Thus the coordinates are changed once the content has been scrolled. That is why we need to compensate it by adding $('.Container').scrollTop() .
$(document).ready(function() { $(".Menu li").on('click', function() { $('.Container').animate({ scrollTop: $($(this).data('target')).position().top + $('.Container').scrollTop() }, 'slow'); }); });
.Wrapper { display: flex; position: relative; width: 90vw; height: 90vh; background-color: purple; } .Menu { position: relative; width: 10vw; height: 90vh; background-color: blue; } .Menu li { position: relative; font-size: 4vw; line-height: 5vw; text-align: center; color: white; cursor: pointer; list-style-type: none; } .Container { position: relative; width: 80vw; height: 90vh; background-color: red; overflow-y: hidden; } .Box { position: relative; width: 80vw; height: 90vh; background-color: purple; cursor: pointer; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="Wrapper"> <div class="Menu"> <li id="Anchor_A" data-target="#Box_A">A</li> <li id="Anchor_B" data-target="#Box_B">B</li> <li id="Anchor_C" data-target="#Box_C">C</li> <li id="Anchor_D" data-target="#Box_D">D</li> <li id="Anchor_E" data-target="#Box_E">E</li> </div> <div class="Container"> <div class="Box" id="Box_A"> Box A </div> <div class="Box" id="Box_B"> Box B </div> <div class="Box" id="Box_C"> Box C </div> <div class="Box" id="Box_D"> Box D </div> <div class="Box" id="Box_E"> Box E </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.