Плавная прокрутка JQuery к одному элементу при нажатии на соответствующий элемент

Я хочу иметь возможность плавно перемещаться между двумя элементами. Я использовал этот скрипт для прокрутки между ссылкой и привязкой. Я надеюсь изменить назначение этого скрипта, чтобы обеспечить плавную прокрутку для различных типов элементов на основе части идентификатора каждого элемента.

Вот исходный сценарий

Плавная прокрутка JQuery при нажатии на ссылку привязки - см. ниже

$(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;
    });
});

Вот где я сейчас

Я хочу изменить сценарий, чтобы он работал между нажатием span или div и затем прокруткой до li, у которого есть установленный идентификатор:

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

Вот где я собираюсь внести свою модификацию вышеупомянутого сценария.

$(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;
    });
});

Я не могу понять, как настроить scrollTop для работы между span и li с соответствующим идентификатором. Я оставил строку scrollTop такой, какой она была в исходном скрипте.

Любая помощь будет принята с благодарностью

Спасибо


jquery scrolltop
person Matt    schedule 07.01.2014    source источник
comment
Во-первых, это неверно var $gotoid = $('.goto').attr('id');. $ ('. goto') вернет массив. Вы пытаетесь получить Id массива. ›.‹   -  person TCHdvlp    schedule 07.01.2014

Ответы (1)


arrow_upward
2
arrow_downward

Здесь 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>

здесь немного CSS для визуальной обратной связи

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

и вот исправленный 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;
    });
});

А потом скрипка

http://jsfiddle.net/DyH8S/

Не стесняйтесь просить объяснений

person TCHdvlp    schedule 07.01.2014