Question

I’m currently working on a project with a one page design that’ll slide up and down between sections on an <a href> link…

Currently, i have it written as follows:

<ul>
    <li><a href="javascript:void(0)" onClick="goToByScroll('top')">home</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('artistsmaterials')">artist's materials</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('pictureframing')">picture framing</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('gallery')">gallery</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('contactus')">contact us</a></li>  
</ul>

…with the most relevant portion being the links:

<a href="javascript:void(0)" onClick="goToByScroll('contactus')">

Then in a .js file I have:

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Is this ok? Or should this be done a different way?

Answer 1

A better approach would be to not use anchors in this case, you can simplify your markup and code like this:

<ul id="scrollMenu">
    <li rel="top">home</li>
    <li rel="artistsmaterials">artist's materials</li>
    <li rel="pictureframing">picture framing</li>
    <li rel="gallery">gallery</li>
    <li rel="contactus">contact us</li>  
</ul>

And then this script:

$(function() {
  $("#scrollMenu li").click(function() {        
   $('html,body').animate({scrollTop: $("#"+$(this).attr("rel")).offset().top},'slow');
  });
});

This adds a click handler to your <li> elements telling them to use their rel="" property to know where to scroll to. Just change your CSS around to point to the <li> elements instead of <a> and you’re all set.