一页网站hashbang导航滚动

时间:2015-08-17 00:32:48

标签: javascript jquery html html5 scrolltop

我计划为我的One Page网站进行SEO优化。 我有一件困难的事情,那就是使用hashbang的滚动功能。当我从导航中点击网址时,该页面上有平滑滚动到部分。

<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 =&#34;!work-experience&#34; ,网站没有滚动,网页浏览器试图加载不存在的网址。

1 个答案:

答案 0 :(得分:0)

您应该使用.htaccess或等效的服务器来处理#的位置变化! #,或者更好的是,假设您使用AngularJS!#启用HTML5模式。