Beginnerprogrammer Beginnerprogrammer - 5 months ago 12
HTML Question

Bootstrap scrollspy is not working on appearing text

I have a checkbox and when that specific checkbox is checked it shows some text above:

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


this wil toggle the text which works and than I wanted to set a scrollspy which scrolls to the text which appears when checkbox is checked here is the html:

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


and this is the scrollspy code where the checked is never logged:

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


Here a fiddle : LINK

Answer

That's not how scrollspy works. Try this instead.

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>