如何減慢單頁平滑滾動？

-1

我已將一些javascript添加到導航條標記的單頁網站。所以現在當用戶點擊標題時，他們會直接進入該部分。目前它直接進入該部分，我該如何減慢速度，以便從導航到所選部分的平滑滾動過渡？如何減慢單頁平滑滾動？

這裏是我的代碼，因爲它代表 -

$('a[href^="#"]').click(function(event) { 
 
    var id = $(this).attr("href"); 
 
    var target = $(id).offset().top; 
 
    $('html, body').animate({ 
 
    scrollTop: target 
 
    }, 500); 
 
    event.preventDefault(); 
 
}); 
 

 
function getTargetTop(elem) { 
 
    var id = elem.attr("href"); 
 
    var offset = 60; 
 
    return $(id).offset().top - offset; 
 
} 
 

 

 
$(window).scroll(function(e) { 
 
    isSelected($(window).scrollTop()) 
 
}); 
 

 
var sections = $('a[href^="#"]'); 
 

 
function isSelected(scrolledTo) { 
 

 
    var threshold = 100; 
 
    var i; 
 

 
    for (i = 0; i < sections.length; i++) { 
 
    var section = $(sections[i]); 
 
    var target = getTargetTop(section); 
 

 
    if (scrolledTo > target - threshold && scrolledTo < target + threshold) { 
 
     sections.removeClass("active"); 
 
     section.addClass("active"); 
 
    } 
 

 
    }; 
 
}

header { 
 
    height: 50px; 
 
} 
 

 
nav { 
 
    text-align: center; 
 
    padding: 10px; 
 
    margin-top: 20px; 
 
} 
 

 
nav a { 
 
    color: #000000; 
 
    transition: all 0.2s ease-in-out 0s; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border-bottom: 2px solid transparent; 
 
} 
 

 
nav a:link { 
 
    color: #000000; 
 
    text-decoration-line: none; 
 
} 
 

 
nav a:nth-of-type(1):hover { 
 
    border-color: rgb(255, 29, 142); 
 
} 
 

 
nav a:nth-of-type(2):hover { 
 
    border-color: rgb(133, 52, 146); 
 
} 
 

 
nav a:nth-of-type(3):hover { 
 
    border-color: rgb(255, 128, 55); 
 
} 
 

 
nav a:nth-of-type(4):hover { 
 
    border-color: rgb(0, 182, 223); 
 
} 
 

 
nav a:nth-of-type(5):hover { 
 
    border-color: rgb(63, 190, 150); 
 
} 
 

 
nav a:nth-of-type(6):hover { 
 
    border-color: rgb(255, 222, 32); 
 
} 
 

 
nav a:hover { 
 
    color: #000000; 
 
} 
 

 
#logo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 750px; 
 
} 
 

 
#whatwedo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 750px; 
 
} 
 

 
#whoweare { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 750px; 
 
} 
 

 
#partners { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 750px; 
 
} 
 

 
#contact { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 750px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav> 
 
    <a href="#logo">Home</a> 
 
    <a href="#whatwedo">What we do</a> 
 
    <a href="#whoweare">Who we are</a> 
 
    <a href="#partners">Who we work with</a> 
 
    <a href="#contact">Say hello</a> 
 
    <a href="Blog">Blog</a> 
 
    </nav> 
 

 
</header> 
 

 
<section id="logo">Logo</section> 
 

 
<section id="whatwedo">What we do </section> 
 

 
<section id="whoweare"> Who we are </section> 
 

 
<section id="partners"> Our Partners </section> 
 

 
<section id="contact"> Contact </section>

來源

2017-09-29 Mike.Whitehead

可能的重複[如何減慢動畫離子？]（https://stackoverflow.com/questions/15245734/how-to-slow-down-the-animation） –

你可以把一個完整和完整的代碼，所以我們可以重現 –

@TemaniAfif嗨，我現在包括我應該首先完成的代碼片段，道歉。 –

必須修改賦予生命的價值，並換上了更大的一個是這樣的：

$('html, body').animate({ 
    scrollTop: target 
    }, 2000);

2000手段2秒

來源

2017-09-29 10:56:56

如何減慢單頁平滑滾動？

回答

相關問題