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内に配置しています。これはさまざまな方法で実行できますが、ハイパーリンクには、スクロール先の要素のクラスを持つ属性が少なくとも1つ必要です。

デモ： 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);
});

​

hrefがピリオドで始まることができるかどうか（コードが機能するときに有効であるかどうかに関して）100％確信が持てないので、別の方法：

<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 に答える