在bootstrap scrollspy上简单缓和 [英] Simple easing on bootstrap scrollspy
问题描述
对于那些知道javascript / jquery好的人，我认为这是一个非常简单的问题。我对这一切都很陌生，无法做到。我找到了计算导航栏偏移量的代码，如下所示：
This is pretty simple question I think for those who knows javascript/jquery good. I am pretty new to all this and couldn't make it. I found code that is calculating the offset of navbar that looks like this:
var offset = 50;
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
这是小提琴示例。正如您所看到的，如果您单击导航栏中的链接，它只会跳到部分。在这个脚本中添加缓动的位置，以便向下滚动更顺畅？
And here is the fiddle example of what I have so far. As you can see if you click link in navbar it just skips to section. Where in this script to add easing so it scroll down a bit smoother?
原始代码我先找到了有那个流畅的滚动，但新的脚本丢失了。这是旧代码：
With original code I found first I had that smooth scroll but with new script is lost. This is the old code:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
推荐答案
Plavookac 您好。
我已在此 小提琴中设置了一个工作示例 for you。
当您将此代码放在页面中时，请将其放在所有其他js脚本链接下面。或者如果您将其放在脚本链接中，请将链接放在最后。
我认为你已经有了jquery链接。
Plavookac Hi there.
I have set up a working sample here in this Fiddle for you.
When you place this code in your page, place it below all of you other js script links. or if you put this in a script link, place the link at the end.
I take it that you would already have the jquery link .
在这里查看此代码，您将看到平滑滚动和偏移。
Have a look at this code here, you will see the smooth scrolling and the offset.
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: "#navbar"});
// Add smooth scrolling on all links inside the navbar
$("#navbar a").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});
注意这行代码... event.preventDefault（）; 这用于防止首次单击开始滚动时出现闪烁。
Notice this line of code... event.preventDefault(); this is used to prevent that flicker when first clicked to start the scrolling.
这部分代码将处理平滑滚动。
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
这有帮助吗？
这篇关于在bootstrap scrollspy上简单缓和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
