blocks|key|380195|text|你真的需要那个插件吗？您可以只对scrollTop属性进行动画处理：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|380196|$("#nav+ul+li+a[href%5E='#']").on('click',+function(e)+{

+++//+prevent+default+anchor+click+behavior
+++e.preventDefault();

+++//+store+hash
+++var+hash+=+this.hash;

+++//+animate
+++$('html,+body').animate({
+++++++scrollTop:+$(hash).offset().top
+++++},+300,+function(){

+++++++//+when+done,+add+hash+to+url
+++++++//+(default+click+behaviour)
+++++++window.location.hash+=+hash;
+++++});

});|code-block|syntax|javascript|380197|fiddle|380198|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/FyAnb/86/^0|G|9|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Do you really need that plugin? You can just animate the <code>scrollTop</code> property:

<pre><code>$("#nav ul li a[href^='#']").on('click', function(e) {

 // prevent default anchor click behavior
 e.preventDefault();

 // store hash
 var hash = this.hash;

 // animate
 $('html, body').animate({
 scrollTop: $(hash).offset().top
 }, 300, function(){

 // when done, add hash to url
 // (default click behaviour)
 window.location.hash = hash;
 });

});
</code></pre>

<a href="http://jsfiddle.net/FyAnb/86/">fiddle</a>

blocks|key|162358|text|如果你有一个固定的导航栏，你需要这样的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162359|取自上述最好的答案和评论...|162360|$(".bs-js-navbar-scrollspy+li+a[href%5E='#']").on('click',+function(event)+{
++var+target+=+this.hash;

++event.preventDefault();

++var+navOffset+=+$('#navbar').height();

++return+$('html,+body').animate({
++++scrollTop:+$(this.hash).offset().top+-+navOffset
++},+300,+function()+{
++++return+window.history.pushState(null,+null,+target);
++});
});|code-block|syntax|javascript|162361|首先，为了防止“未定义的”错误，在调用preventDefault()之前，将散列存储到变量target中，然后引用该存储值，如pupadupa所述。|offset|length|style|CODE|162362|下一个。您不能使用window.location.hash+=+target，因为它会同时设置url和位置，而不是单独设置。您最终将拥有id与href匹配的元素开头的位置……但被你固定的顶部导航栏所覆盖。|162363|为了解决这个问题，您可以将scrollTop值设置为目标的垂直滚动位置值减去固定导航栏的高度。直接对准该值可以保持平滑滚动，而不是在之后添加调整，并且会出现不专业的抖动。|162364|你会注意到url并没有改变。若要设置此项，请改用return+window.history.pushState(null,+null,+target);，手动将url添加到历史堆栈。|162365|完成了！|162366|其他注释：|162367|1)使用.on方法是最新的(截至2015年1月)+jquery方法，它比.bind或.live，甚至比.click更好，原因我留给你去找出答案。|162368|2)+navOffset值可以在函数内部也可以在外部，但您可能希望它位于外部，因为您很可能会为其他函数/+DOM操作引用该垂直空间。但我把它放在里面是为了把它整齐地放到一个函数中。|162369|entityMap^0|0|0|0|J|G|1A|6|0|9|T|0|0|O|1G|0|0|0|4|3|10|5|16|5|1F|6|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@$K|18|L|19|M|N]|$K|1A|L|1B|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@$K|1D|L|1E|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1G|8|@$K|1H|L|1I|M|N]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1L|8|@$K|1M|L|1N|M|N]|$K|1O|L|1P|M|N]|$K|1Q|L|1R|M|N]|$K|1S|L|1T|M|N]]|9|@]|A|$]]|$1|10|3|11|5|6|7|1U|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|13|$]]

If you have a fixed navbar, you'll need something like this. 

Taking from the best of the above answers and comments...

<pre><code>$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
 var target = this.hash;

 event.preventDefault();

 var navOffset = $('#navbar').height();

 return $('html, body').animate({
 scrollTop: $(this.hash).offset().top - navOffset
 }, 300, function() {
 return window.history.pushState(null, null, target);
 });
});
</code></pre>

First, in order to prevent the "undefined" error, store the hash to a variable, <code>target</code>, before calling <code>preventDefault()</code>, and later reference that stored value instead, as mentioned by pupadupa.

Next. You cannot use <code>window.location.hash = target</code> because it sets the url and the location simultaneously rather than separately. You will end up having the location at the beginning of the element whose id matches the href... but covered by your fixed top navbar.

In order to get around this, you set your scrollTop value to the vertical scroll location value of the target minus the height of your fixed navbar. Directly targeting that value maintains smooth scrolling, instead of adding an adjustment afterwards, and getting unprofessional-looking jitters.

You will notice the url doesn't change. To set this, use <code>return window.history.pushState(null, null, target);</code> instead, to manually add the url to the history stack.

Done!

Other notes: 

1) using the <code>.on</code> method is the latest (as of Jan 2015) jquery method that is better than <code>.bind</code> or <code>.live</code>, or even <code>.click</code> for reasons I'll leave to you to find out.

2) the navOffset value can be within the function or outside, but you will probably want it outside, as you may very well reference that vertical space for other functions / DOM manipulations. But I left it inside to make it neatly into one function.

blocks|key|380290|text|$("#YOUR-BUTTON").on('click',+function(e)+{
+++e.preventDefault();
+++$('html,+body').animate({
++++++++scrollTop:+$("#YOUR-TARGET").offset().top
+++++},+300);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|380291|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("#YOUR-BUTTON").on('click', function(e) {
 e.preventDefault();
 $('html, body').animate({
 scrollTop: $("#YOUR-TARGET").offset().top
 }, 300);
});
</code></pre>

blocks|key|162425|text|我把它组合起来，这是结果-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162426|$(document).ready(function()+{
+++++$("#toTop").hide();

++++++++++++//+fade+in+&+out
+++++++$(window).scroll(function+()+{
++++++++++++++++++++if+($(this).scrollTop()+>+400)+{
++++++++++++++++++++++++$('#toTop').fadeIn();
++++++++++++++++++++}+else+{
++++++++++++++++++++++++$('#toTop').fadeOut();
++++++++++++++++++++}
++++++++++++++++});+++++
++$('a[href*=#]').each(function()+{
++++if+(location.pathname.replace(/%5E\//,'')+==+this.pathname.replace(/%5E\//,'')
++++&&+location.hostname+==+this.hostname
++++&&+this.hash.replace(/#/,'')+)+{
++++++var+$targetId+=+$(this.hash),+$targetAnchor+=+$('[name='+%2B+this.hash.slice(1)+%2B']');
++++++var+$target+=+$targetId.length+?+$targetId+:+$targetAnchor.length+?+$targetAnchor+:+false;
+++++++if+($target)+{
+++++++++var+targetOffset+=+$target.offset().top;
+++++++++$(this).click(function()+{
+++++++++++$('html,+body').animate({scrollTop:+targetOffset},+400);
+++++++++++return+false;
+++++++++});
++++++}
++++}
++});
});|code-block|syntax|javascript|162427|我测试了它，它工作得很好。希望这能对某些人有所帮助:)|162428|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I combined it, and this is the results - 

<pre><code>$(document).ready(function() {
 $("#toTop").hide();

 // fade in &amp; out
 $(window).scroll(function () {
 if ($(this).scrollTop() &gt; 400) {
 $('#toTop').fadeIn();
 } else {
 $('#toTop').fadeOut();
 }
 }); 
 $('a[href*=#]').each(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 &amp;&amp; location.hostname == this.hostname
 &amp;&amp; this.hash.replace(/#/,'') ) {
 var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
 var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
 if ($target) {
 var targetOffset = $target.offset().top;
 $(this).click(function() {
 $('html, body').animate({scrollTop: targetOffset}, 400);
 return false;
 });
 }
 }
 });
});
</code></pre>

I tested it and it works fine. hope this will help someone :)

blocks|key|380369|text|如果你下载了jquery+easing插件(check+it+out)，那么你只需要在你的main.js文件中添加如下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|380370|$('a.smooth-scroll').on('click',+function(event)+{
++++var+$anchor+=+$(this);
++++$('html,+body').stop().animate({
++++++++scrollTop:+$($anchor.attr('href')).offset().top+%2B+20
++++},+1500,+'easeInOutExpo');
++++event.preventDefault();
});|code-block|syntax|javascript|380371|另外，不要忘记将smooth-scroll类添加到您的a标记中，如下所示：|380372|+<li><a+href="#about"+class="smooth-scroll">About+Us</a></li>|380373|entityMap|0|LINK|mutability|MUTABLE|url|http://gsgd.co.uk/sandbox/jquery/easing/^0|L|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

If you download the jquery easing plugin <a href="http://gsgd.co.uk/sandbox/jquery/easing/" rel="nofollow noreferrer">(check it out)</a>,then you just have to add this to your main.js file:

<pre><code>$('a.smooth-scroll').on('click', function(event) {
 var $anchor = $(this);
 $('html, body').stop().animate({
 scrollTop: $($anchor.attr('href')).offset().top + 20
 }, 1500, 'easeInOutExpo');
 event.preventDefault();
});
</code></pre>

and also dont forget to add the smooth-scroll class to your a tags like this: 

<pre><code> &lt;li&gt;&lt;a href="#about" class="smooth-scroll"&gt;About Us&lt;/a&gt;&lt;/li&gt;
</code></pre>

blocks|key|380394|text|//+styles.css
html+{
++++scroll-behavior:+smooth
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|380395|来源：https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2|unstyled|offset|length|380396|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2^0|0|3|1W|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>// styles.css
html {
 scroll-behavior: smooth
}
</code></pre>

Source: <a href="https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2" rel="noreferrer">https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2</a>

blocks|key|380414|text|使用此代码，id将不会出现在链接上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|380415|++++document.querySelectorAll('a[href%5E="#"]').forEach(anchor+=>+{
++++++++anchor.addEventListener('click',+function+(e)+{
++++++++++++e.preventDefault();

++++++++++++document.querySelector(this.getAttribute('href')).scrollIntoView({
++++++++++++++++behavior:+'smooth'
++++++++++++});
++++++++});
++++});|code-block|syntax|javascript|380416|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

with this code, the id will not appear on the link
<pre><code> document.querySelectorAll('a[href^=&quot;#&quot;]').forEach(anchor =&gt; {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();

 document.querySelector(this.getAttribute('href')).scrollIntoView({
 behavior: 'smooth'
 });
 });
 });
</code></pre>

I've been trying to add a smooth scrolling function to my site for a while now but can't seem to get it to work. 

Here is my HTML code relating to my navigation:

<pre><code>&lt;div id="nav-wrapper"&gt;
&lt;div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675"&gt;
 &lt;div class="navbar-inner" data-spy="affix-top"&gt;
 &lt;div class="container"&gt;

 &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
 &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
 &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;/a&gt;

 &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
 &lt;div class="nav-collapse collapse"&gt;
 &lt;ul class="nav"&gt;
 &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#service-top"&gt;Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#contact-arrow"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;&lt;!--/.nav--&gt;
 &lt;/div&gt;&lt;!--/.nav-collapse collapse pull-right--&gt;
 &lt;/div&gt;&lt;!--/.container--&gt;
 &lt;/div&gt;&lt;!--/.navbar-inner--&gt;
&lt;/div&gt;&lt;!--/#nav /.navbar navbar-inverse--&gt;
&lt;/div&gt;&lt;!--/#nav-wrapper--&gt;
</code></pre>

Here is the JS code I've added:

<pre><code>&lt;script src="js/jquery.scrollTo-1.4.3.1-min.js"&gt;&lt;/script&gt;

&lt;script&gt;
 $(document).ready(function(e) {

 $('#nav').scrollSpy()
 $('#nav ul li a').bind('click', function(e) {
 e.preventDefault();
 target = this.hash;
 console.log(target);
 $.scrollTo(target, 1000);
 });
 });
&lt;/script&gt;
</code></pre>

For what it's worth, <a href="https://stackoverflow.com/questions/8711333/bootstrap-js-scrollspy-with-animated-scroll">here</a> is where I received info on what I've done so far, and <a href="http://homegrowndevelopment.com/" rel="noreferrer">here</a> is my site in it's current form. If you can help me I'll bake you a pie or cookies or something. Thanks!

How to add smooth scrolling to Bootstrap's scroll spy function

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试着给我的网站添加一个平滑的滚动功能已经有一段时间了，但是似乎不能让它工作。以下是与我的导航相关的HTML代码：<div id="nav-wrapper"><div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offse...

问如何在Bootstrap的滚动间谍功能中添加平滑滚动
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap的滚动间谍功能中添加平滑滚动EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap的滚动间谍功能中添加平滑滚动
EN