I have a dropdown with vertical scroll bar. What i need is if i select any text from a drop down, it should be on the top of the scroll top. Ex. I have 10 items in dropdown. If i select 3rd item, the selected item should be visible on the top of scroll bar. I have try with the following code.
$(document).ready(function(){
$("p").on("click", function(){
var scroll = $(document).scrollTop();
alert(scroll);
});
});
Just I have try this, don't know how to do this. Help me
With prependTo
$(document).ready(function(){ $("p").on("click", function(){ $(this).prependTo(".nano") }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <body> <div class="container"> <div class="nano has-scrollbar"> <p>jerrin</p> <p>stephen</p> <p>augustin</p> <p>yeswanth</p> <p>irfan</p> <p>aashik</p> <p>dinesh</p> <p>zaid</p> <p>mari</p> <p>aravinth</p> <p>asf</p> <p>qwe</p> <p>ewq</p> <p>fhg</p> <p>uyt</p> <p>rty</p> <p>rty</p> <p>rty</p> </div> </div> </body> </html>
With scroll
$(document).ready(function(){ $("p").on("click", function(){ $('html, body').animate({ scrollTop: $(this).offset().top },100); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <body> <div class="container"> <div class="nano has-scrollbar"> <p>jerrin</p> <p>stephen</p> <p>augustin</p> <p>yeswanth</p> <p>irfan</p> <p>aashik</p> <p>dinesh</p> <p>zaid</p> <p>mari</p> <p>aravinth</p> <p>asf</p> <p>qwe</p> <p>ewq</p> <p>fhg</p> <p>uyt</p> <p>rty</p> <p>rty</p> <p>rty</p> </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.