javascript - jquery scroll to element not working - scrolls to random places -
javascript - jquery scroll to element not working - scrolls to random places -
there many stackoverflow questions regarding couldn't find answer. have javascript code:
$(function() { $('a[href*=#]:not([href=#])').click(function() { $('html,body, .main').animate({ scrolltop: $(this.hash).offset().top - 10 }, 1000); }); }); and html code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <!--[if gt ie 8]><!--><link rel="stylesheet" href="styles.css"><!--<![endif]--> <link rel="stylesheet" href="common.css"> <script src="responsive-nav.js"></script> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="scripts/extrascripts.js"></script> </head> <body> <div role="navigation" id="foo" class="nav-collapse"> <ul> <li class="active"><a href="#section1">inicio</a></li> <li><a href="#section2">equipo</a></li> <li><a href="#section3">sistemas</a></li> <li><a href="#section4">desarrollo</a></li> </ul> </div> <div role="main" class="main"> <a href="#nav" class="nav-toggle">menu</a> <div class = "section" id = "section1" > <!-- stuff --> </div> <div class = "section" id = "section2"> <!-- stuff --> </div> <div class = "section" id = "section3"> <!-- stuff --> </div> <div class = "section" id = "section4" > <!-- stuff --> </div> </div> <script> var navigation = responsivenav("foo", {customtoggle: ".nav-toggle"}); </script> </body> </html> so using template found online. has fancy menu on left , main content on middle. inside:
<div role="main" class="main"> </div> i want when link on menu clicked, scrolls particular sections (#section1, #section2, #section3, #section4). right works first time click on 1 of links sec time goes random place.
any clues why might happening?
--- update ----
i tried of solutions mentioned , not working. think has css have main container (class .main). take @ code (i took code library using):
.main { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-overflow-scrolling: touch; padding: 3em 4em; position: fixed; overflow: hidden; overflow-y: scroll; border-top-left-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0, .6); top: .8em; right: 0; bottom: 0; width: 76%; background: #fff; } .main::-webkit-scrollbar { -webkit-appearance: none; background-color: rgba(0,0,0, .15); width: 8px; height: 8px; } .main::-webkit-scrollbar-thumb { border-radius: 0; background-color: rgba(0,0,0, .4); } i tried removing css code above , using , works:
$(function() { $('a[href*=#]:not([href=#])').click(function() { $('html,body, .main').animate({ scrolltop: $(this.hash).offset().top - 10 }, 1000); }); }); but need css. clue how can prepare it?
your problem had unusual phone call context of link clicked $(this.hash). changing that = $(this) outside closure solved problem.
$(function() { $('a[href*=#]:not([href=#])').click(function() { var = $(this); $('html,body, .main').animate({ scrolltop: that.offset().top - 10 }, 1000); }); }); here plunker
later on!!
javascript jquery html scroll
Comments
Post a Comment