Auto scroll?

Hi,

You’ll need to add custom javascript in your page to do this. If you want/can do this, let me know which element exactly you want to scroll to, so I can post the code to add.

Hello.

I need it for two websites which uses same theme, lets do it here: https://hernividea.cz/css-christmas-by-dhnn-frag-movie/

It should scroll smothly to embed video in featured area to center it into middle of monitor like this: https://i.postimg.cc/DZ7YSpzX/V-st-i-ek.png right after post loading.

I can add it as snippet or into functions or anywhere if necessary. If there will be option to set up offset to position it should be nice. It can scroll to any element of post if there will be offset option. It should also work only for tablet/desktop devices – above 768px

You can add the js script in your theme/child-theme footer.php template after wp_footer() function or just before the closing body tag (</body>).

Using your header element id theme-header as the offset, you basically avoid scrolling on small devices, without having to set a condition to check for the viewport. Your video id is the-sticky-video so I’m using this as the target to scroll to.

The code that does the scrolling is the "scrollTo" method provided by the plugin. I’ve also added a small 100 milliseconds delay for the scrolling event (after the page is fully loaded).

Using the code below as is, you can add the id the-sticky-video on any element in a page and it’ll scroll to that element:

(function($){
	$(window).on("load",function(){
		var idToScroll="#the-sticky-video";
		if($(idToScroll).length){
			setTimeout(function(){
				$.mPageScroll2id("scrollTo",idToScroll,{
				    offset:"#theme-header"
				});
			},100);
		}
	});
})(jQuery);

If you want to change the id to scroll to change the idToScroll variable and if you want to change the offset change the offset attribute in mPageScroll2id function.

Let me know

• This reply was modified 1 year, 10 months ago by malihu.

Added your script to footer area and it looks like it does nothing. Tried to add id: the-sticky-video to another elements and same result. To me it looks like some plugin conflict or I am doing something wrong..

I added your code to theme settings here:
https://i.postimg.cc/6QCq3LWk/V-st-i-ek.png

I also tried to add it into theme footer.php and still nothing happen.

Works to me only if I add #the-sticky-video into URL
https://hernividea.cz/css-christmas-by-dhnn-frag-movie/#the-sticky-video

I also noticed that custom JS code showed up in footer..

https://i.postimg.cc/Vv3fFdDy/V-st-i-ek.png

• This reply was modified 1 year, 10 months ago by Martin Bene?.

@drivezone You need to include the script tag in the code:

<script>
(function($){
	$(window).on("load",function(){
		var idToScroll="#the-sticky-video";
		if($(idToScroll).length && !window.location.hash){
			setTimeout(function(){
				$.mPageScroll2id("scrollTo",idToScroll,{
				    offset:"#theme-header"
				});
			},100);
		}
	});
})(jQuery);
</script>

https://hernividea.cz/css-christmas-by-dhnn-frag-movie/#the-sticky-video will always work, regardless.

I’ve also added an additional check in the condition in the code above to check for a hash (#) in the URL.

Let me know if everything works

Works perfectly. Thank you!

You’re welcome ??
Marking this as resolved.