Scroll to Single Post

Question

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 is a breeze, but implementing it in such a way that when the user clicks on a post and the site scrolls downwards to display the single post custom template is not.

This is a reference site demonstrating this function - Nike Free Voice. What basically happens is that if you click an image, the site will scroll down to reveal the actual article/post.

I'm supposing that the most appropriate way is to use AJAX to load the content into a DIV and then have JQUERY to scroll the page down to that particular DIV. Question here is: How do I do that?

I've also considered scrolling down to an IFRAME but targeting the IFRAME source to the single.php file or the actual permalink won't work - doing so for the former just renders an error and doing so for the latter will mean that the content loaded in isn't dynamic because it is an absolute link to the permalink.

Really hope someone around would have an idea of where to start.

Thanks in advance guys!

PS: I haven't posted any sample codes because the infrastructure of Wordpress is pretty much standard. It's really just the matter of loading in the right single post content and then scrolling to it.

Jørgen · Answer 1 · 2011-09-21T08:06:43.627

2

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.

function scrollToElement(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);
      });

edited Sep 21 '11 at 08:06

answered Sep 21 '11 at 07:55

Jørgen

8,820
9
47
67

hi Jørgen. thanks for replying! think that solves the scrolling issue. any idea how i can load in the single post query into the div only when the user clicks on post? PS: refer to http://nike.jp/nikefreevoice/ for a better idea. actual article/post is only loaded and scrolled to when you click the image. – vynx Sep 21 '11 at 07:59
sorry, just to clarify in case i misunderstood. so are you saying that the defined div "#post" is residing in single.php rather than index.php? – vynx Sep 21 '11 at 08:04
1

I edited my answer, but I'm not quite sure I understand everything. Is it so that you get some content from another URL, single.php, and you need to insert the response into the DOM? Finally scrolling to the data inserted? #somePostList is refering to the DOM-element you want to put the response into, e.g:
– Jørgen Sep 21 '11 at 08:09
hi Jørgen, saw your amended example. think we're getting somewhere with this. i noticed that there is a targeted URL that the AJAX has to point to: so considering that the files for Wordpress or any CMS sites are largely templated (e.g. index.php, single.php, category.php), i probably can't be pointing the URL to the files. any idea what i should be pointing it to instead? – vynx Sep 21 '11 at 08:11
I'm afraid I'm not familiar with the WP API but I guess you will have to generate the URLs in you template in the context of each content item. – Jørgen Sep 21 '11 at 08:25
yup, i need to get some content from another URL, but the URL is not something like www.yourwebsite.com/single.php. rather the URL is actually a dynamically generated permalink of the post which is something like yourwebsite.com/?p=13. so i can't be defining an permalink in the URL cos it will only display the one post associated with it. hope that's a little clearer – vynx Sep 21 '11 at 08:26

score 1 · Answer 2 · answered Sep 21 '11 at 07:44

1

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

<a name="someDiv">
<div><img ... ></div>

And to jump to it:

window.location.hash="someDiv";

It's even bookmarkable!

answered Sep 21 '11 at 07:44

Hank

4,597
5
42
84

hey hank, thanks for replying with a suggestion =) that would definitely work for sites with static content, but unlikely for sites with dynamic content. wordpress requires a post query to be initiated on page load so if i were to do that, i'll basically be putting 2 queries in the index page. moreover, the single post query requires for the proper selection of the permalink to be posted to it before it can load the appropriate article in. so anchors may not be suitable for this cos it'll probably run up with an error or even if it works, it'll probably bog down the site's performance. – vynx Sep 21 '11 at 07:52
Ack, understood. I should have mentioned that I have no experience with wordpress :) Good luck then! – Hank Sep 21 '11 at 07:57
no problem hank. in any case, i still appreciate your willingness to help =) – vynx Sep 21 '11 at 08:01

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

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

edited May 23 '17 at 12:12

Community

1
1

answered Sep 23 '11 at 10:04

vynx

1,269
1
12
20

Scroll to Single Post

3 Answers3

Linked