Question

我制作了单页网站，点击导航栏时滚动到各自的部分，我已经为此应用了脚本，

//平滑滚动到href值

jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand").click(function(event){
                 event.preventDefault();
                 //calculate destination place
                 var dest=0;
                 if($(this.hash).offset().top > $(document).height()-$(window).height()){
                      dest=$(document).height()-$(window).height();
                 }else{
                      dest=$(this.hash).offset().top;
                 }
                 //go to destination
                 jQuery('html,body').animate({scrollTop:dest}, 1000,'swing');
             });

我的导航就像，

<ul class="nav navbar-nav">
                    <li class="active"><a href="#home">HOME</a></li>
                    <li><a href="#services">services</a></li>
                    <li><a href="#experience">skills</a></li>
                    <li><a href="#team">our team</a></li>
                    <li><a href="#portfolio">About Us</a></li>
                    <li><a href="#contact-us">contact us</a></li>
                    <li><a href="career.html" target="_self">career</a></li>

                  </ul>

现在，由于脚本，它不会通过点击＆＃34; career＆＃34;进入下一页。如何通过点击相同标签或新标签打开career.html。

抱歉我的英文。

Answer 1

jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand").click(function(event) {
    event.preventDefault();
    var dest = 0;
    if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
        dest = $(document).height() - $(window).height();
    } else {
        dest = $(this.hash).offset().top;
    }
    jQuery('html,body').animate({
        scrollTop: dest
    }, 1000, 'swing');
});

您正在调用event.preventDefault();，导致链接操作被忽略。如果您想在#anchor链接上平滑滚动，但让常规链接正常工作，那么您可以检查href的第一个字符是否为#。

$(event).target.attr("href").startsWith("#")

如何在同一选项卡或新选项卡中打开项目的新子页面？

1 个答案: