一个页面的网站hashbang导航滚动

One Page website hashbang navigation scrolling

本文关键字：网站 hashbang 导航 滚动 一个      更新时间：2023-09-26

我计划为我的单页网站做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;
          }
        }
    });
}

当我使用默认url时一切正常，但当我更改

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

并将section的id改为id="! "

显示"工作经验"，网站不滚动，浏览器试图加载不存在的url。

你应该使用。htaccess或者你的服务器来处理#!到#，或者更好的是，假设你正在使用AngularJS，启用html5模式。

相关文章：