Question

我是一个有JS的菜鸟，我有一个用于滚动页面的单页网站的菜单栏，但不会打开外部链接，你们其中一个人可以帮忙吗？以下代码可以在http://protocol-labs.com/new

查看网站

HTML

<div class="collapse navbar-collapse navbar-right" id="myNavbar">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#banner">Home</a></li>
        <li class=""><a href="#service">Services</a></li>
        <li class=""><a href="#about">About</a></li>
        <li class=""><a href="#testimonial">Testimonial</a></li>
        <li class=""><a href="contact.html">Contact</a></li>        
    </ul>
</div>

导致问题的js

(function ($) {

// Add smooth scrolling to all links in navbar
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 900, function(){
        window.location.hash = hash;
    });
});

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar-default").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});   
})(jQuery);

Answer 1

您已阻止默认附加到您的主播事件。这可以防止链接工作。

$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
        event.preventDefault(); // prevents link from working. Remove it and you should be good.

Answer 2

尝试向所有带锚点的链接（前4个）添加一个特殊类，并通过单击这些链接调用该函数，通过单击<a href="contact.html">Contact</a>

来保持标准行为

Answer 3

我修改了js和html代码:(我猜这段代码是Medilab + Template的一部分） JS / JQuery

if (unknown instanceof Horse)

HTML代码：

(function ($) {

// Add smooth scrolling to all links in navbar
$(".navbar2").on('click', function(event) {
    event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 900, function(){
        window.location.hash = hash;
    });
});

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar-default").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});})(jQuery);

外部链接不会打开

3 个答案: