Javascript/JQuery for animated scrolling from another page -
i've got animated scrolling here. works same page, when in index.html:
<ul id="nav"> <li><a href="#section1">natural beauty</a></li> <li><a href="#section2">beginings</a></li> <li><a href="#section3">earth's purity</a></li> <li><a href="#section4">bottling goodness</a></li> <li><a href="#section5">drink health</a></li> <li><a href="#section6">minerals</a></li> <li><a href="contact.html">contact us</a></li> </ul>
here's js i've used refference above:
$(document).ready(function(){ $('a[href*=#]').each(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') && this.hash.replace(/index.html#/,'') ) { 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; // jquery click function remove , add class "active" + scroll #div $(this).click(function() { $("#nav li a").removeclass("active"); $("#nav2 li a").removeclass("active"); $(this).addclass('active'); $('html, body').animate({scrolltop: targetoffset}, 1200); return false; }); } } }); });
test code above , when click 1 of gnav, it'll jump section, smooth transition , header still print/show 'just' 'index.html' (the #section not print/shown). now, how can make work's if tried acces different page. want acces index2.html, when gnav these:
<ul id="nav2"> <li><a href="index.html#section1">•natural beauty</a></li> <li><a href="index.html#section2">•beginings</a></li> <li><a href="index.html#section3">•earth's purity</a></li> <li><a href="index.html#section4">•bottling goodness</a></li> <li><a href="index.html#section5">•drink health</a></li> <li><a href="index.html#section6">•minerals</a></li> </ul>
it jump actual page, header change index.html#section(1/2/..). how can make gnav jump actual section , header still print index.html , without print/shown #section. please ask me if question didn't clear. help. ps: sorry don't know how paste in fiddle since fiddle can't show whats in header. again, help
here example of code.
jquery("document").ready(function($){ if(window.location.hash != ""){ $('html,body').animate({scrolltop: $(window.location.hash).offset().top},'slow'); } })
Comments
Post a Comment