Question

正如标题所示。具有唯一名称的类的多个“帖子”，也是唯一的数据全名。我知道如何用ID做这件事，但不知道你是否可以。

抱歉，如果这不够具体。这是一个演示ID方法的小提琴：http://jsfiddle.net/avYBz/

Answer 1

我只是将类放在href中。您可以通过各种方式执行此操作，但超链接至少需要一个具有您要滚动到的元素类的属性。

<a href=".uniqueID"   >Go to post</a>

<div style="height:1300px"></div> 

<div class="uniqueID" id="1234">This is the post </div>

$('a').click(function(e) {
    e.preventDefault();

    var scrollto = $(this).attr('href');
    $('html, body').animate({
            scrollTop: $(scrollto).offset().top
        }, 1500);
});

我不是百分之百确定一个href可以以句点开始（关于代码是否有效），所以可以替代：

<a href="#" data-link="uniqueID"   >Go to post</a>
<div style="height:1300px"></div> 
<div class="uniqueID" id="1234">This is the post </div>

$('a[data-link]').click(function(e) {
    e.preventDefault();

    var scrollto = '.' + $(this).attr('data-link');
    $('html, body').animate({
            scrollTop: $(scrollto).offset().top
        }, 1500);
});

最后，您可以在每个div中附加一个锚点，然后在href中使用它，就像普通的局部散列链接一样。由于所有这些解决方案都需要javascript，我不确定它是否真正重要，但是这个解决方案将href设置为我们在加载时添加到页面的有效本地锚点。您可以删除此部分中的click事件，它仍然有效，但页面将跳转而不是滚动。

演示：http://jsfiddle.net/lucuma/jK5T3/3/

$('#container div').each(function() {
   $(this).append('<a id="' + $(this).attr('class') + '" />');
});

$('a').click(function(e) {
    e.preventDefault();

    var scrollto = $(this).attr('href');
    $('html, body').animate({
            scrollTop: $(scrollto).offset().top
        }, 1500);
});

链接，将您移动到没有ID的同一页面上的div（仅限类，数据已满）

1 个答案: