Question

I 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.

I would like this for each section.

Answer 1

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.