Javascript 如何防止单击导航栏项目后重新加载单页应用程序？

我正在构建一个简单的SPA（它包含旋转木马部分、关于我们部分、一些表单，然后是团队部分…），我有一个简单的问题：如何防止在单击导航栏项目后重新加载页面，并保持url与开始时相同？单击每个导航栏项目页面，向下滚动至所选零件

这是我的代码：

HTML导航栏：

<nav id="navBar" class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationBar">
                    <span class="sr-only">Toogle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="./media/img/....png"/>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navigationBar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#abc">Home</a></li>
                    <li><a href="#aaa">About us</a></li>
                    <li><a href="#bbb">...</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-toggle="modal" data-target="#registrationModal"><span class="glyphicon glyphicon-user"></span> Registration</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </div>
</nav>

$('.navbar li 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 - 100
            }, 1000);
            return false;
        }
    }
});

1.）

event.preventDefault（）

关于它

防止重新加载

$('.navbar li a').click(function (e) {
    e.preventDefault()
    $('body,html').animate({
        scrollTop: $($(this).attr('href')).offset().top - 100
    },2000);
});

2.

href

带有散列

---

如果更改

，它将不会重新加载页面，因为链接引用了内部更改。但是，由于单页应用程序的性质，这是不利的。

如果我理解正确，您只需要为a标记添加一个阻止默认值

$('.navbar li a').click(function (event){
  event.preventDefault();
  $('body,html').animate({
    scrollTop: $($(this).attr('href')).offset().top - 100},2000);
});

---

我希望这有帮助：）

有没有办法让url更漂亮？定义更漂亮？我通常使用www.example.com/#/page/语法。我更新了jQuery代码。你能给我解释一下吗，因为我是在网上找到的，它完全符合我的需要。它有点复杂/模糊。查看

window.location.hash

上的文档，了解我的意思。