CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Sireini
Sireini

Reputation: 4262

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

Upvotes: 0

Views: 104

Answers (1)

cssyphus
cssyphus

Reputation: 40078

That's not how scrollspy works.

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

What you are looking for is to animate body scroll to a desired position.

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>

Upvotes: 1

Related Questions