JQuery smooth scrolling to one element when clicking a corresponding element

Question

I want to be able to smoothly scroll between two elements. I've been using this script to scroll between a link and a anchor. I'm hoping to re-purpose this script to allow smooth scrolling be various element type based on part of a 'id' of each element.

---

Here's the original script

JQuery smooth scrolling when clicking an anchor link - see below

$(document).ready(function(e) {
    //SCROLL TO ANCHOR TAG
    var $root = $('html, body');

    $('a').click(function() {
            $root.animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 2000);
        return false;
    });
});

---

Here's where I'm upto

I want to modify the script so it would work between clicking on a span or div and then scrolling to a a li which has a set id:

<ul>
    <li id="1">frame 1 - <span id="goto2" class="goto">go to frame 2</span></li>
    <li id="2">frame 2 - <span id="goto3" class="goto">go to frame 3</span></li>
    <li id="3">frame 3 - <span id="goto4" class="goto">go to frame 4</span></li>
    <li id="4">frame 4 - <span id="goto5" class="goto">go to frame 5</span></li>
    <li id="5">frame 5 - <span id="goto1" class="goto">go to frame 1</span></li>
</ul>

Here's where I'm up to with my modification of the above script.

$(document).ready(function(e) {
    //SCROLL TO ANCHOR TAG
    var $root = $('html, body');

    var $gotoid = $('.goto').attr('id');
    var $justid = $gotoid.replace('goto','');


    $('.goto').click(function() {
        console.log($gotoid);
        console.log($justid);
            $root.animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 2000);
        return false;
    });
});

What I can't figure out is how to set the scrollTop to work between the span to the li with the corresponding id. I've left the scrollTop line as it was in the original script.

Any help would be greatly appreciated

Thanks

Answer 1

Here the html

<ul>
    <li id="li1">frame 1 - <span id="goto2" class="goto">go to frame 2</span></li>
    <li id="li2">frame 2 - <span id="goto3" class="goto">go to frame 3</span></li>
    <li id="li3">frame 3 - <span id="goto4" class="goto">go to frame 4</span></li>
    <li id="li4">frame 4 - <span id="goto5" class="goto">go to frame 5</span></li>
    <li id="li5">frame 5 - <span id="goto1" class="goto">go to frame 1</span></li>
</ul>
<div id="1">1</div><div id="2">2</div><div id="3">3</div><div id="4">4</div><div id="5">5</div>

here a little css for visual feedback

div{
    height:600px;
    background-color:#aaa;
    margin-top:20px;
}

and here's the fixed JS

$(document).ready(function(e) {
//SCROLL TO ANCHOR TAG
var $root = $('html, body');

    $('.goto').click(function() {
        var $gotoid = $(this).prop('id');
        var $justid = $gotoid.replace('goto','');
        console.log($gotoid);
        console.log($justid);
        if(typeof $("#"+$justid) != undefined){  // test if target exists
            $root.animate({
                scrollTop: $("#"+$justid).offset().top
            }, 2000);
        }
        return false;
    });
});

And then, the fiddle

http://jsfiddle.net/DyH8S/

Feel free to ask for explainations