Question

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/

Answer 1

I am just putting the class inside the href.. You could do this various ways but the hyperlink needs at least one attribute that has the class of the element you are wanting to scroll to.

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

​

I’m not 100% sure that a href can start with a period (with regards to being valid as the code works) so an alternate:

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

Lastly you could append an anchor in each div and then use that in the href like a normal local hashed link. Since all these solutions require javascript I’m not sure it really matters which you use but this solution keeps the href set to a valid local anchor that we’ve added to the page on load. You can remove the click event in this part and it will still work but the page will jump instead of scrolling nicely.

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

​