Avatar of john_yourspace
john_yourspace
 asked on

Infinite Scroll Back Button

Hi guys,

I am using infinite scroll like this

 $('#primaryArticleWrapper').infinitescroll({
			  loading: {
						finished: undefined,
						finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
						img: "",
						msg: null,
						msgText: "<em>Loading.</em>",
						selector: null,
						speed: 'fast',
						start: undefined
					},
						 
			navSelector  : "#nav-below",            
						   // selector for the paged navigation (it will be hidden)
			nextSelector : "div .nav-previous a:first",    
						   // selector for the NEXT link (to page 2)
			itemSelector : ".article"          
						   // selector for all items you'll retrieve
		  });
		  
		  // unbind normal behavior. needs to occur after normal infinite scroll setup.
		$(window).unbind('.infscr');
		
		$('#nav-below').hide();
		
		$("a.articleLoadMore").click(function(){
			$('#primaryArticleWrapper').infinitescroll('retrieve');
				return false;
		});
		

Open in new window


Which works perfectly except for the back button, any suggestions this is a wordpress site


thanks,

J
jQueryWordPressJavaScriptCSSHTML

Avatar of undefined
Last Comment
Bob Learned

8/22/2022 - Mon
eemit

Try this:
//Click event to scroll to top
$('.scroll-to-top').click(function(){
	$('html, body').animate({scrollTop : 0}, 800);
	return false;
});

Open in new window


Assumes you have this in your template:
<p class="scroll-to-top"><a href="#" >Scroll to top</a></p>

Open in new window

john_yourspace

ASKER
Hi Eemit,

I am not sure how this will work,


The problem is the user scrolls through a number of pages using infinite scroll

so for example he scrolls to page 10 and clicks through to a post , when the back button is used the user is back on page one
eemit

Put that in jQuery(document).ready function e.g.:
jQuery(document).ready(function($){
	// put the code I posted in here.
});

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
john_yourspace

ASKER
but i dont want to scroll to the top?
eemit

Oh sorry! my bad!
john_yourspace

ASKER
no problem
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

Did you saw how Facebook and Google+ handled this issue ?
john_yourspace

ASKER
is it hash bang or?
Bob Learned

Are you using the Infinite Scroll plug-in, or something hand-rolled?

http://www.infinite-scroll.com/

What version of WordPress are you using?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
john_yourspace

ASKER
using the js from infinite-scroll.com

3.9.1
Bob Learned

I wonder if that problem is related to this post:

Screw Hashbangs: Building the Ultimate Infinite Scroll
http://tumbledry.org/2011/05/12/screw_hashbangs_building
john_yourspace

ASKER
Thanks Bob I seen  that, found it tough to understand, we didnt bother implementing it in the end
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Bob Learned

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question