Scroll to stopped working

Anonymous

#42554

Hello,

Quick one, I’m using masonry on my Ajax results so I call it back in as below :

<script type="text/javascript">
( function($) {
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        $('.grid-archive').masonry();
    });
} ) ( jQuery );
</script>

But since doing that it no longer scrolls to my results container, I’ve tried a scroll to myself within the above js but it doesn’t work as well as yours. Anything I can do?

Thanks 🙂

Anonymous

#42555

This reply has been marked as private.

Ross Moderator

#42573

Hey TJ

I think its a matter of ordering of events – S&F probably does scroll but the masonry call is messing this up somehow (perhaps the masonry script uses scrollTop somewhere and this clashes with S&F).

I would try to manually add the scrolling back in after the masonry call – so taking some scrolling code from S&F (with modification):

var scrollToPos = function()
{
	var offset = 0;
	var canScroll = true;
	

	if(jQuery("#focus-results").length>0)
	{
		offset = jQuery("#focus-results").offset().top;
	}

	
	$("html, body").animate({
		  scrollTop: offset
	}, "normal", "easeOutQuad" );
	
	
	
};

Then after masonry you could do scrollToPos();

You might even need to add a delay for masonry to complete so:

setTimeout(function(){ scrollToPos(); }, 100);

Just to confirm, if you do not use that masonry script scrolling works fine?

Let me know how you get on.

Thanks

Anonymous

#42623

Hi Ross,

Ahaa! I just removed masonry and it’s still not working – so a good question raised thank you.

You can re-check that page now and see what I mean. Do you know why that’s not working?

Many thanks,
TJ

Ross Moderator

#42645

Hey TJ thats odd.

S&F tried to find the selector on the page, and if it doesn’t exist it won’t fire.

What happens when you change the scroll position to custom, and enter in the ID of the results container manually?

Did you try the code I supplied too, just to see if its working?

Thanks

Anonymous

#42647

Hey Ross,

I know, so strange! So I’ve changed it to custom and set it to go to #focus-results but still not working.

No, I haven’t tried your other suggestion yet, only because I want this to work for another search form on a people search where there will be no masonry so would like to try and get this one sorted first if that’s ok, then you never know it may just work again on masonry too, but if not I will try what you have said for sure :).

Anonymous

#42649

Ahhh something else I’ve just spotted, it works on Firefox, but not on Chrome!! Does this help?

Anonymous

#42696

Hey Ross, just had chance to test a little more, basically I’ve now re-added masonry and set it to go to “Results Container” and it actually works fine on Firefox and Internet Explorer.

But it doesn’t work on Chrome (tested on different machines too just in case) or on Safari (tested on mobile, where it just stays at the bottom of the results) – they just won’t play ball. It’s as though they just can’t see the container, but it’s there, and there’s no code/tag snags that could confuse it, and it’s a unique identifier, you can see if you view source. I also added a completely separate dummy container, and set it to go to “Custom Selector:” but sadly it made no difference.

Any ideas? As mentioned I don’t want to place that other code you suggested, as I want this to work on another set of results without masonry so need it for that anyway. Many thanks 🙂

Ross Moderator

#42697

Hey TJ, just thought, did you by any chance update to the new WP today?

Anonymous

#42712

Hey Ross, no I haven’t, I always hold off a little while until I know there are no impacting issues 😉

[Author]

Posts