Question

出于某种原因，我的导航链接到他们各自的部分已停止在我的投资组合模板网站上运行。是否有一个快速的JavaScript或JQuery解决方案，我可以放入我的脚本部分再次给它们功能？

导航锚标记示例

            <ul class="nav navbar-nav" id="main-menu">
                <li>
                    <a href="#page-profile">Profile</a>
                </li>
            </ul>

部分目标示例

<section id="page-profile" class="page-profile">
        <div class="container">
            <header class="section-header">
                <h2 class="section-title">Personal Profile</h2>
                <div class="spacer"></div>
                <p class="section-subtitle">About Me</p>
            </header>

Answer 1

这样的事情应该有效。

// URL Parsing
var parser = document.createElement('a');
parser.href = window.location.href;
var hash = parser.hash;

// Page scrolling
var offset = 20; //Offset of 20px

$('html, body').animate({
    scrollTop: $(hash).offset().top + offset
}, 2000);

Answer 2

使用jQuery：

$("moveToSectionButtonSelector").click(function() {
    $('html, body').animate({
        scrollTop: $("#page-profile").offset().top
    }, 1000);
});

导航链接功能失败

2 个答案: