स्क्रॉल करने से पहले चिकनी स्क्रॉल फ़्लैश क्यों करता है?

Question

मैं एक एकल पृष्ठ वेबसाइट बना रहा हूं जो एंकर टैग के माध्यम से खंडों में विभाजित है। जब आप एनएवी लिंक पर क्लिक करते हैं तो यह अनुभाग में चिकनी स्क्रॉल करता है (केवल फंडिंग क्षेत्र और हमारे बारे में पूरा हो जाता है), हालांकि, जब आप लिंक पर क्लिक करते हैं तो यह लगभग 50% लगता है, पृष्ठभूमि छवि यह चिकनी स्क्रॉल को पहले चमकती है jQuery ऊपर या नीचे स्क्रॉल करता है।

मेरे लिए ऐसा लगता है कि एचटीएमएल तुरंत एंकर पर जाने की कोशिश कर रहा है, इसलिए चमकती है, लेकिन फिर jQuery कहती है, पकड़ो, मुझे धीरे-धीरे स्क्रॉल करने की आवश्यकता है।

मुझे यकीन नहीं है कि इसे कैसे हल किया जाए।

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); 
}); 
}); 

मैं बहुत सराहना करते हैं किसी भी और सभी सुझावों।

Answer 1

अपने क्लिक फ़ंक्शन के बाद event.preventDefault(); जोड़ने का प्रयास करें।

यह लिंक को ऐसा करने से रोकता है जो इसे करना है (तुरंत एंकर पर कूदें) और दौड़ की स्थिति को रोकता है।

Answer 2

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

या यहां तक ​​कि क्लीनर:

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

यहाँ क्यों है:

• event.preventDefault() vs. return false