Scroll Up/Down To Different Areas on a Page

Question

Hi,

Would like to implement the following feature using jQuery scrollTo function or some other similar function that will achieve the same result.

I am basically going to have a DIV section on my page that will contains about 10 category URL links.

For example:

div id="categories">
  <a href="A">Section A</a>
  <a href="B">Section B</a>
  <a href="C">Section C</a>
  <a href="D">Section D</a>
   ...
   etc
</div>

Now below this DIV, I will have all these 10 category sections set out down the page with a number of images within each of the categories.

What I would like and unsure how to do using jQuery is that when a user say clicks on Section C above, I would like the page to scrollTo smoothly down the page to Section C heading that also has images underneath it and so that Section C title is now at the top of the page together with any images underneath it.

Section A
Image1-Image2 etc

Section B
Image1-Image2 etc

Section C
Image1-Image2 etc

Section D
Image1-Image2 etc

Now from here, I would also like another mechanism that would allow the user to return back to the Catergories DIV above, again using a smooth scroll To back to the top of the page to once again display each individual section.

Would like this for each section.

Hoping someone can assist or provide some example tutorials to assist.

Thanks.

Answer 1

You can do this pretty easily with the jQuery scrollTo plugin. One of the methods it allows you to specify scroll is by passing the id of the element you want to smoothly scroll to. So in your case, this could be done as follows:

$('#categories a').click(function(e){
    // Stop default link clicking behaviour
    e.preventDefault();

    // Get the section id from the link's href
    var sectionId = $(this).attr('href');
    $(document).scrollTo(sectionId);
});

Then your markup would look something like the following:

div id="categories">
    <a href="#A">Section A</a>
    <a href="#B">Section B</a>
</div>

<div id="A">
  <img src="foo.gif"/>
</div>
<div id="B">
  <img src="bar.gif"/>
</div>

Notice that I've changed your category link hrefs and the addition of the named anchor inside each of your sections. This will allow people without javascript to still jump to the section on link click.

To then get back up to the categories from each section, you could just insert a back to top link that used the same style of click handler as your categories links, instead this time it would specify a scrollTo('#categories').

Answer 2

You could have markup like this:

<div id="categories">
  <a href="#A">Section A</a>
  <a href="#B">Section B</a>
  //etc...
</div> 

<h3 id="A">Section A</h3>
<div>
    Image1-Image2 etc<br />
    <a href="#categories" class="backToTop">Back to Top</a>
</div>

<h3 id="B">Section B</h3>
<div>
    Image1-Image2 etc<br />
    <a href="#categories" class="backToTop">Back to Top</a>
</div>
//etc...

And matching jQuery like this:

$("#categories a, a.backToTop").click(function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $(this.hash).offset().top });
});

You can give it a try here, there's no need for plugins if you just want a simple scroll :) The benefit of this approach is that if JavaScript is disabled, they'll still get the scroll effect just without the animation, you can see what that looks like here.