javascript - ScrollTo Effect (href to div) -
i can't seem find working simple scrollto effect. want basic, it's when click on link in nav bar, must take me selected div id scrollto effect.
this code have.
<nav> <ul> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> <section id="home"> content </section> <section id="about"> content </section> <section id="contact"> content </section>
js:
<!----- navegaciĆ³n slide ---> $(document).ready(function() { $('a[href*=#]').each(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') ) { var $targetid = $(this.hash), $targetanchor = $('[name=' + this.hash.slice(1) +']'); var $target = $targetid.length ? $targetid : $targetanchor.length ? $targetanchor : false; if ($target) { var targetoffset = $target.offset().top; <!----- funcion click + scroll al #div---> $(this).click(function() { $("nav ul li a").removeclass("active"); $(this).addclass('active'); $('html, body').animate({scrolltop: targetoffset}, 1000); return false; }); } } }); });
this seems work, doesnt take me top of selected section. takes middle of section's content.
use jquery here fiddle http://jsfiddle.net/4qt9h95n/1/
$('a[href^="#"]').click(function() { $('html,body').animate({ scrolltop: $(this.hash).offset().top}, 1000); return false; e.preventdefault(); });
Comments
Post a Comment