javascript - Bootstrap scrollspy 不适用于显示的文本

Question

我有一个复选框，当选中该特定复选框时，它会在上面显示一些文本:

 $('#pck-94').click(function() {
     $('#pico-info').toggle(this.checked);
  });

这将切换有效的文本，并且我想设置一个滚动 spy ，它滚动到选中复选框时出现的文本，这里是 html:

<span id="pico-info">(het verjaardagsfeestje Pico Patat is voor kinderen vanaf 4 jaar en maximale lengte 1.30m)</span>

这是滚动 spy 代码，其中检查的内容永远不会被记录:

   if($('input#pck-94').prop('checked')){
        console.log('check');
        $('body').scrollspy({ target: '#pico-info' });
    }

这里有一个 fiddle :LINK

Answer 1

这不是 scrollspy 的工作原理。

Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page.1

您正在寻找的是使 body 滚动到所需位置的动画。

试试这个。

jsFiddle Demo:

$('#pck-94').click(function() {
	$('#pico-info').toggle(this.checked);
});

$('input#pck-94').change(function(){
	$('html, body').animate({
		scrollTop: $('#pico-info').offset().top
	}, 900);
});

html,body{height:2000px;}
	#div1{height:1200px;}
		#chk{position:absolute;top:50px;left:200px;}
	#pico-info{display:none;}
	#div2{height:500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="div1">
	<div id="chk">Click Me: <input id="pck-94" type="checkbox" value="Show Pico-Info" /></div>
</div>
<span id="pico-info">(het verjaardagsfeestje Pico Patat is voor kinderen vanaf 4 jaar en maximale lengte 1.30m)</span>

<div id="div2"></div>