jQuery smooth scrolling anchor navigation -
i have list based navigation @ top of site, it's 1 page site hrefs anchors sections on page. i've used code: jquery smooth scroll positioning doesn't work
navigation:
<nav> <ul class="navigation"> <li class="navigation"><a class="scroll" href="#about-me">about me</a> </li> <li class="navigation"><a class="scroll" href="#my-skills" >my skills</a> </li> <li class="navigation"><a class="scroll" href="#portfolio">portfolio</a> </li> <li class="navigation"><a class="scroll" href="#contact">contact</a> </li> </ul> </nav>
section/div:
<section id="contact"> <!----> <div class="panel" id="contact"> <h2>contact</h2> </div> </section> <!---->
javascript used:
<script type="text/javascript"> $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventdefault(); var target = this.hash; $target = $(target); $('html, body').stop().animate({ 'scrolltop': parseint($target.offset().top,10); }, 900, 'swing', function () { window.location.hash = target; }); }); }); </script>
the anchor works , jumps section, no scrolling?
there few problems in code:
- you haven't closed
li
s properly- you have same
id
ssection
,div
invalid
<section id="contact"> <!----> <div class="panel" id="contact">
so correcting above mistakes add 1 more change in js is:
- no need add
parseint
scrolltop
. can directly gooffset().top
$(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventdefault(); var target = this.hash; $target = $(target); $('html, body').stop().animate({ 'scrolltop': $target.offset().top //no need of parseint here }, 900, 'swing', function () { window.location.hash = target; }); }); });
Comments
Post a Comment