Skip to content Skip to sidebar Skip to footer

Scroll To Single Post

I'm currently developing a website on Wordpress that requires sort of like a fluid single page layout. Developing the custom templates for the index, single post and category pages

Solution 1:

This function takes in a target element, which should be the div containing the post, and a duration, if you want to animate the scrolling.

functionscrollToElement(element, duration){
 var verticalScrollTarget = element.offset().top;
 if(typeof duration == 'undefined'){
    $('html,body').scrollTop(verticalScrollTarget);
  }else{
    $(($('html').scrollTop() != 0 ? 'html':'body')).animate({scrollTop: verticalScrollTarget}, duration)
  }
}

Example:

    $.ajax({ 
      url: '/someurl',
      success : function(response){
         var target = $('div',response);
         $('#somePostList').append(response);
         scrollToElement(target, 1000);
      });

Solution 2:

How about setting an anchor at the desired location, then jumping to it?

<aname="someDiv"><div><img... ></div>

And to jump to it:

window.location.hash="someDiv";

It's even bookmarkable!

Solution 3:

I've resolved the issue at another post (Load Wordpress post Content into DIV using AJAX / JQUERY) that was specifically targeted at loading the content in using AJAX and JQUERY based on Emanuele Feronato's post

Post a Comment for "Scroll To Single Post"