一頁網站hashbang導航滾動

Question

我打算為我的一頁網站進行SEO優化。 我有一件困難的事情要做，那就是使用hashbang的滾動功能。 當我從導航中單擊url時，可以平滑滾動到該頁面上的部分。

<ul class="navigation" id="menu">
    <li>
        <a href="#personal-profile">Personal Details</a>
    </li>
    <li>
        <a href="#work-experience">Experience</a>
    </li>
    <li>
        <a href="#education">Education</a>
    </li>
    <li>
        <a href="#skills">Skills</a>
    </li>
    <li>
        <a href="#contact">Contact</a>
    </li>
</ul>

我使用此功能可以平滑滾動：

function handleSmoothScrolling() {

    $('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) +']');
            console.log(target.offset());
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 500);
            return false;
          }
        }
    });
}

當我使用默認網址時一切都很好，但是當我更改時

<a href="#work-experience">Experience</a> to <a href="#!work-experience">Experience</a> 

並且div部分的id為id =“！work-experience”，網站沒有滾動，並且Web瀏覽器嘗試加載不存在的URL。

Answer 1

您應該使用.htaccess或等效的服務器來處理＃！的位置更改。 到＃，或者更好的是，假設您正在使用AngularJS，請啟用！＃，啟用HTML5mode。