Archived topic
Forced auto-scroll on certain page
8 replies · Started by Carol on April 2, 2018
What is the best way to force the page to load exactly below the top header and navigation? Here is the page I'm working on: https://ncsfa.site/convention-2018/
What I'm trying to do is have the page load with only the slider showing on the viewpoint. The user will have to scroll up to see the top header content.
I've tried to insert an elementor anchor at the top of the slider with a class of slider-top. But I don't know how to link to this page anchor on page load.
Any help would gladly be appreciated.
You could try to use javascript.
Something like this in the wp_footer hook might work:
<script>
jQuery(document).ready(function ($) {
$('html, body').scrollTop( 300 );
});
</script>300 being the height in pixels to start the page at.
Yes, but wouldn't that be applied to all pages? And what if I'm already using a elementor template shortcode in that gp hook position? Isn't there a way to apply this only to that particular page id# ?
You could use PHP for that:
<?php if ( is_page( 'your-page-slug' ) ) : ?>
<script>
jQuery(document).ready(function ($) {
$('html, body').scrollTop( 300 );
});
</script>
<?php endif; ?><?php if ( is_page( 'convention-2018' ) ) : ?>
<script>
jQuery(document).ready(function ($) {
$('html, body').scrollTop( 300 );
});
</script>
<?php endif; ?>
Inserted that in the wp_footer hook but it works on ALL pages, not just the https://ncsfa.site/convention-2018/ page. Since we haven't promoted this yet, I'll leave it until you see it.
Any more thoughts on how to do this?
Sorry about this! Not sure how I missed your reply.
Did you check the "Execute PHP" checkbox in that hook?
That box was hidden. iThemes security had added the disable line in the config file. Tweaked the security, removed the line, logged out, logged back in, checked the box and voila! Working like a champ. You're the best.
Thanks
Awesome, no problem :)
