0

I had created a page that had internal jumps to a particular section inside a div, with specified ID. It is working fine (internally).

localhost/index.html#career-div
localhost/index.html#about-div

I have elements with IDs career-div and about-div.

When I tried to jump from another page (say contact.html) to index.html with hashtag, it did not jump to the 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 just loads the index page as normal, but is not jumping to specified ID. I tried the name attribute also, but it did not work!

If I hit the enter key on the address bar, the page jumps like it should! I want this to smoothly scroll after switching pages.

The function I am using for smooth scroll towards the target and button class management is 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;
       }
     } 
  });
});
Martin54
  • 1,349
  • 2
  • 13
  • 34
Shan
  • 1,081
  • 1
  • 12
  • 35
  • How did you do the internal jumps? Did you use anchor tags? – codyogden Apr 29 '15 at 17:24
  • yes im using the anchor tags, just as given above, and im using jquery for smooth scrolling towards the target ::: $('a[href*=#]:not([href=#])').click(function() { . . . . .. } – Shan Apr 29 '15 at 17:27
  • 1
    You need to post the jQuery, the plugin name and any relevant Javascript you're using. The page will jump to `` immediately on loading. Example (click link on this page): http://cjo.me/so/29950391/index.html – codyogden Apr 29 '15 at 17:30
  • @codyogden question updated, im calling the internal links as : career its not working! – Shan Apr 29 '15 at 17:47
  • What is the desired effect? Do you want it to load `index.html` and then smooth scroll? Or just load like my example where the first thing you see is the section linked to? – codyogden Apr 29 '15 at 17:51
  • i would prefer a smooth scroll if possible – Shan Apr 29 '15 at 17:53
  • 1
    Using `$('#button-careers, #button-services, #button-about, #button-home').removeClass('active');` would make your script much cleaner. – Dom Apr 29 '15 at 21:30
  • 1
    Why don't you take something like this [answer](http://stackoverflow.com/questions/27096621/how-to-disable-anchor-jump-when-loading-a-page/29823834#29823834) and take away browser control but wrap a call to your own function in the window.load. Would stop the jump and provide a smooth scroll in all cases including on a index.html#something URI – TechnicalChaos Apr 29 '15 at 21:38
  • Glad to hear it! Best of luck with the rest of the project :) – TechnicalChaos Apr 30 '15 at 06:06
  • Have you though about using [fullpage.js](http://alvarotrigo.com/fullPage/)? Live is easy :) – Alvaro Apr 30 '15 at 12:18

0 Answers0