jquery - Jump to specific part of an HTML page from an external link not working -
i had created page had internal jumps particular section inside div
, specified id. working fine (internally).
localhost/index.html#career-div localhost/index.html#about-div
i have elements ids career-div
, about-div
.
when tried jump page (say contact.html
) index.html
hashtag, did not jump particular section!!
<a href="index.html#career-div">career</a> <div class="container"> <div id="career-div" class="content-block-div"> </div> </div>
the above code loads index
page normal, not jumping specified id. tried name attribute also, did not work!
if hit enter key on address bar, page jumps should! want smoothly scroll after switching pages.
the function using smooth scroll towards target , button class management here:
$(function(){ $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrolltop: target.offset().top }, 1000); if(this.hash=='#content-spacer') { $('#button-home').addclass('active'); $('#button-about').removeclass('active'); $('#button-services').removeclass('active'); $('#button-careers').removeclass('active'); $('#button-contact').removeclass('active'); } else if(this.hash=='#about-spacer') { $('#button-about').addclass('active'); $('#button-home').removeclass('active'); $('#button-services').removeclass('active'); $('#button-careers').removeclass('active'); $('#button-contact').removeclass('active'); } else if(this.hash=='#services-spacer') { $('#button-services').addclass('active'); $('#button-about').removeclass('active'); $('#button-home').removeclass('active'); $('#button-careers').removeclass('active'); $('#button-contact').removeclass('active'); } else if(this.hash=='#career-spacer') { $('#button-careers').addclass('active'); $('#button-services').removeclass('active'); $('#button-about').removeclass('active'); $('#button-home').removeclass('active'); $('#button-contact').removeclass('active'); } else if(this.hash=='#contact-spacer') { $('#button-contact').addclass('active'); $('#button-careers').removeclass('active'); $('#button-services').removeclass('active'); $('#button-about').removeclass('active'); $('#button-home').removeclass('active'); } return false; } } }); });
Comments
Post a Comment