閃爍使用動畫和滾動到

Question

$('.mainNav a[href^="#"]').on('click', function (event) { 
    var target = $(this.getAttribute('href')); 
    if (target.length) { 
    event.preventDefault(); 
    $('body').stop(true).animate({ 
     scrollTop: target.offset().top - 130 
    }, 1000); 
    } 
    return false; 
}); 

我嘗試使用preventDefault()但仍閃爍

Answer 1

這裏的時候是我會做什麼：
- 你不需要因爲你使用preventDefault()返回false，你應該把它任何條件語句
之前 - 你不需要true在stop()功能
- 你應該使用$('html, body')代替$('body')

$('.mainNav a[href^="#"]').on('click', function (event) { 
    var target = $($(this).attr('href')); 
    event.preventDefault(); 
    if (target.length){ 
     $('html, body').stop().animate({ 
      scrollTop: target.offset().top - 130 
     }, 1000); 
    } 
}); 

但是，如果它不能解決您的問題，也許做一個jsfiddle或codepen向我們展示？因爲閃爍可能是由於腳本本身以外的其他元素引起的。

Answer 2

hmm。在這裏沒有看到你的問題。除了一些小問題與你的JQ碼

做了一個簡單的例子。看到這裏jsfiddle

或代碼片段如下：

$('.mainNav a[href^="#"]').on('click', function (event) { 
 
    event.preventDefault(); 
 
    var target = $(this.getAttribute('href')); 
 
    if (target.length) { 
 
    $('html,body').stop().animate({ 
 
     scrollTop: target.offset().top - 130 
 
    }, 1000); 
 
    } 
 

 
});

h1 { 
 
    color:#fff; 
 
    font-size:30px; 
 
    margin:0 
 
} 
 
#home { 
 
    height:300px; 
 
    background:red; 
 
    margin-top:48px; 
 
} 
 
#about { 
 
    height:600px; 
 
    background:green 
 
} 
 
#contact { 
 
    height:200px; 
 
    background:blue; 
 
} 
 
ul li { 
 
    list-style:none; 
 
    display:inline-block 
 
} 
 
ul { 
 
    position:fixed; 
 
    padding:15px 0; 
 
    width:100%; 
 
    background:rgba(255,255,255,0.6); 
 
    top:0; 
 
    margin:0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="mainNav"> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#about">About</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
</ul> 
 
<div id="home"> 
 
<h1>WELCOME !</h1> 
 
</div> 
 
<div id="about"> 
 
<h1>About Us</h1> 
 
</div> 
 
<div id="contact"> 
 
<h1>Contact Us</h1> 
 
</div>