0

just as title reads. multiple "posts" that have a class that has a unique name, also a data-fullname that is unique as well. I know how to do this with IDs but don't know if you can otherwise.

sorry if this isn't specific enough. here's a fiddle that demonstrates the ID method: http://jsfiddle.net/avYBz/

4

1 回答 1

1

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

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

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

​

我不是 100% 确定 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 设置为我们在加载时添加到页面的有效本地锚点。您可以在这部分删除点击事件，它仍然可以工作，但页面会跳转而不是很好地滚动。

演示：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);
});

​</p>

于 2012-06-10T06:32:16.777 回答