Dynamic scrolling to next() ID tag

JavaScript
1

I have a page of a website where we are doing several <div>s as bands of content across the entire width of the screen. Each band is a content section that I would like to scroll to with a nice jquery animation. I just need my jquery to scroll from ID to ID as the “next section” (class=“story-next”) hyperlink is clicked. All my “next section” hyperlinks utilize the exact same markup. I want the Jquery to dynamically determine which ID to us as the next target for the scroll each time.

There will be five sections all together and on the fifth and final one, it does not need to return to the first ID (#escoff-story-row-1) … in fact that link may well be inactive for now.

My markup is something like this:

<div id=&#8220;escoff-story-row-1&#8221;>
	<h3>Section Heading 1</h3>
	<p>Some paragraph text. Some paragraph text. Some paragraph text. Some paragraph text</p>
	<p><a href="javascript:;" class="story-next">Next Section</a></p>
</div>

<div id=&#8220;escoff-story-row-2&#8221;>
	<h3>Section Heading 2</h3>
	<p>Some paragraph text. Some paragraph text. Some paragraph text. Some paragraph text</p>
	<p><a href="javascript:;" class="story-next">Next Section</a></p>
</div>

<div id=&#8220;escoff-story-row-3&#8221;>
	<h3>Section Heading 3</h3>
	<p>Some paragraph text. Some paragraph text. Some paragraph text. Some paragraph text</p>
	<p><a href="javascript:;" class="story-next">Next Section</a></p>
</div>

I’m attempting to do this with the Jquery ‘contains’ selector. Jquery looks for any IDs containing ‘escoff-story-row’ and then send the scrollTop to that ID. Unless someone knows of a better way …

Here’s my non working code attempt:

$(document).ready(function(){

	function nextEscoffStoryRow (){
   	     $("html,body").animate({scrollTop: $( "id:contains('escoff-story-row')" ).next().offset().top}, 500);	
	}

	$("a.story-next").click(function(e){
	     e.preventDefault();
	     nextEscoffStoryRow();
  	});

});

Dev URL: http://devonline.wpengine.com/story-2/

2

Couldn’t you use the jQuery/CSS mechanism of show() (display: block) and hide() (display: none) to show and hide the proper DIV upon animation?

3

Your click event could be inside of event document.ready.

4

nguyencomraovat, I didn’t paste my document.ready block into my post here in the forum, but do have it in the actual file. Sorry for the confusion.

I’m sure there are other ways to skin a cat, and thanks for pointing that out Cory, but my directions from the client were to have animated scrolling down the page as each section is read. Right now I have different code block for each “next section” button (link). I’m trying to have a single block of code that works each time the button is clicked … it will dynamically know to just advance to the next ID in the section.

I have a naming convention that I am using for each section ID. I thought I could write a block of code that just augments the number at the end by incrementing it. So each time you click the “next section” button … say, if it’s on section two (#escoff-story-row-2) … upon a click event, it would know to advance to ID #escoff-story-row-3.

http://devonline.wpengine.com/story-2/

5

I think it would be a lot safer (and easier to read a few months later) if you let the anchor being clicked on send either itself, or its href prop, to the function, instead of having it dance around trying to guess the next destination.

like


function nextEscoffStoryRow (destination){
 $("html,body").stop().animate({scrollTop: $(destination).offset().top}, 500);
 }

 $(".story-next").click(function(e){
 e.preventDefault();
  var destination = this.hash;
 nextEscoffStoryRow(destination);
 });

I might have missed something weird about a browser, but I’m pretty sure this.hash will be just the hash in everyone (this.href would not be).

Second I’m not entirely certain you can put a string value like ‘#somewhere’ in $() and it becomes a jQuery object, but I thought so.