从无效的外部链接跳转到HTML页面的特定部分

Question

我创建了一个页面，该页面内部跳转到div内具有指定ID的特定部分。它工作正常（内部）。

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

我的ID为career-div和about-div的元素。

当我尝试使用主题标签从另一个页面（例如contact.html）跳转到index.html时，它没有跳转到特定部分!!

<a href="index.html#career-div">Career</a>

<div class="container">
  <div id="career-div" class="content-block-div">
  </div>
</div>

上面的代码只是正常加载index页面，但没有跳转到指定的ID。我也试过了name属性，但它没有用！

如果我点击地址栏上的回车键，页面就会跳起来！我想在切换页面后顺利滚动。

我用来平滑滚动目标和按钮类管理的功能在这里：

 $(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;
       }
     } 
  });
});