单击相应元素时，jQuery平滑滚动到一个元素 [英] JQuery smooth scrolling to one element when clicking a corresponding element

问题描述

我希望能够在两个元素之间平滑滚动.我一直在使用此脚本在链接和锚点之间滚动.我希望重新利用此脚本的目的，以便根据每个元素的"id"的一部分来平滑滚动各种元素类型.

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.

这是原始脚本

单击锚点链接时，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然后滚动到具有设置ID的li之间进行工作:

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

我不知道是如何设置scrollTop在具有相应ID的span到li之间工作的.我已经离开了原始脚本中的scrollTop行.

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.

任何帮助将不胜感激

谢谢

推荐答案

此处是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用于视觉反馈

here a little css for visual feedback

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/

随时要求解释

这篇关于单击相应元素时，jQuery平滑滚动到一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！