我是一个任何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);
您已将防止默认附加到锚定事件。这可以防止链接工作。
$(".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.
尝试向所有带锚点的链接(前4个)添加一个特殊类,并通过单击这些链接调用该函数,通过单击<a href="contact.html">Contact</a>
保持标准行为
我修改了js和html代码:(我想这段代码是Medilab + Template的一部分)JS / JQuery
(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);
HTML代码:
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#home" class="navbar2" style="padding:0px 10px 0px 10px;">Home</a></li>
<li class=""><a href="service.html#service" style="padding:0px 10px 0px 10px;">Services</a></li>
<li class=""><a href="#about" class="navbar2" style="padding:0px 10px 0px 10px;">About</a></li>
<li class=""><a href="contact.html#contact" style="padding:0px 10px 0px 10px;">Contact</a></li>
</ul>
</div>