LIVE FIDDLE DEMO

Question

我正在尝试将scrollTop函数用于我的程序，但我发现我正在编写大量重复代码。

这是一个例子：

<div id="table_contents >
    <ul>
        <li id="one"> title One </li>
        <li id="two"> title Two </li>
    </ul>
</div>


<div id="content">
    <p id="target_one"> I am content one </p>

    <p id="target_two"> I am content two </p>
</div>

如果我点击“标题一”，我想滚动到“我满意一个” 同样，对于标题二和内容二。

这很容易用jQuery / JS

$("#one").click(function() {
        $('html, body').animate({
            scrollTop: $("#target_one").offset().top -20
        }, 800);
    });

但是比如说我的目录里面有15个元素，我想让每个可点击的内容都滚动到它的内容。为此，我必须为每个元素重复上述代码15次。

有没有比这更好的方法？

Answer 1

只需将脚本更改为：

方法1

$("#table_contents").on("click","li",function() {
        $('html, body').animate({
            scrollTop: $("#target_"+$(this).prop('id')).offset().top -20
        }, 800);
    });

在此方法中，单击元素的id将附加到“target_”，以找到“目标ID”。 此方法甚至适用于动态添加的li元素。

方法2 ： 没有ID [但顺序相同]：

$("#table_contents").on("click","li",function() {
        $('html, body').animate({
            scrollTop: $("#content p").eq($(this).index()).offset().top -20
        }, 800);
    });

在此方法中，元素li的索引映射到p元素的索引以定位滚动位置。

完成!!

http://jsfiddle.net/bmL0o9ez/

http://jsfiddle.net/bmL0o9ez/2/

Answer 2

LIVE FIDDLE DEMO

$("#table_contents ul li").click(function () {

    var theIdAttr = $(this).attr("id");

    $("html, body").animate({
        scrollTop: $("#target_" + theIdAttr).offset().top -20
    });

});

Answer 3

您可以使用更通用的选择器进行类型排序，其中每个元素都需要相同的行为。

$("#table_contents li").click(function() {
        var liElement = $(this);
        $('html, body').animate({
            scrollTop: $("#target_" + liElement.attr('id')).offset().top -20
        }, 800);
    });

Answer 4

您可以根据li的ID动态构建段落的ID。

HTML

标题一标题二

<div id="content">
    <p id="target_one"> I am content one </p>

    <p id="target_two"> I am content two </p>
</div>

使用Javascript：

$("#table_contents li").click(function() {
    $('html, body').animate({
        scrollTop: $('#target_' + $(this).attr('id')).offset().top -20
    }, 800);
 });

Answer 5

使其成为通用的，例如：

$("#table_contents ul li").click(function() {
        $('html, body').animate({
            scrollTop: $('#target_'+ $(this).attr("id")).getId.offset().top -20
        }, 800);
    });

如果你按顺序保留内容，你甚至可以超级通用，例如：

$("#table_contents ul li").click(function() {
        var index = $(this).index();
        $('html, body').animate({
            scrollTop: $('#content:nth-child('+index+')').getId.offset().top -20
        }, 800);
    });

未经测试，但它应该给你一个想法

啦啦队友

Answer 6

这里的解决方案根本不依赖于使用ID，而是使用jQuery的index（）函数：

$("#table_contents li").click(function () {
    $('html, body').animate({
        scrollTop: $("p").eq($(this).index()).offset().top - 20
    }, 800);
});

<强> jsFiddle example

Answer 7

我做

$("#content p").each(function() {
    var heights = [];
    heights.push($(this).offset().top);
});

然后做

heights[your_target_as_index];

完成？

jQuery / Javascript代码重复

7 个答案:

LIVE FIDDLE DEMO