Tại sao đèn flash cuộn mượt mà trước khi cuộn?

Question

Tôi đang xây dựng một trang web được chia thành nhiều phần thông qua các thẻ liên kết. Khi bạn nhấp vào liên kết nav nó cuộn trơn tru đến phần (chỉ các khu vực tài trợ và về chúng tôi hoàn thành), tuy nhiên, nó có vẻ như khoảng 50% thời gian khi bạn nhấp vào liên kết, hình nền nó trơn tru cuộn để nhấp nháy trước jQuery cuộn lên hoặc xuống.

Đối với tôi, có vẻ như HTML đang cố truy cập ngay vào neo, do đó nhấp nháy, nhưng sau đó jQuery nói, giữ lại, tôi cần phải cuộn chậm.

Tôi không chắc chắn cách giải quyết vấn đề này.

jQuery:

// SlowScroll Funding Areas 
$(document).ready(function(){ 

// 'slowScrollTop' is the amount of pixels #teamslowScroll 
// is from the top of the document 

    var slowScrollFunding = $('#funding-areas').offset().top; 

// When #anchor-aboutus is clicked 

    $('#anchor-funding-areas').click(function(){ 
     // Scroll down to 'slowScrollTop' 
     $('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000); 
    }); 
}); 

// SlowScroll About Us 
$(document).ready(function(){ 
// 'slowScrollTop' is the amount of pixels #slowScrollTop 
// is from the top of the document 

    var slowScrollTop = $('#about-us').offset().top + 446; 

// When #anchor-aboutus is clicked 

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
}); 
}); 

Tôi rất đánh giá cao bất kỳ và tất cả các lời đề nghị.

Answer 1

Thử thêm event.preventDefault(); sau hàm nhấp chuột của bạn.

Điều này sẽ ngăn không cho liên kết thực hiện những gì cần thực hiện (nhảy tới neo ngay lập tức) và ngăn chặn tình trạng cuộc đua.

Answer 2

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

Hoặc thậm chí sạch hơn:

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
    return false; 
}); 

Dưới đây là lý do:

• event.preventDefault() vs. return false