Autoscroll to #content on single pages and posts

Would it be better to remove the header image on those posts if it is superfluous?

Don’t ask, in my opinion it would be lots better to just have it as it is by default, but they are supposed to be full screen so it has a more unified look across the pages…

I don’t understand, the two points contradict each other:

I’m working on a site where the single pages and posts should have a full size header image just as on the home page

However to improve the usability, the single pages and posts should automatically load on the content part of the page/post so whoever is using the site doesn’t have to scroll over the whole header image every time they visit a new page or post.

I’m asking because I am volunteering to help you resolve this, but you’ll have to pick either solution. If you want the scroll then why not consider removing the image entirely?

I understand you completely. The idea behind this setup is to have every page and post on the site look similarly, but to only have the full screen header image immediately show on the home page. It should still be there on single pages and posts, just not show immediately, because it supposedly provides greater visual unity to have them all setup like that – so have it only shown on load on the home page, but then first show the content of the pages/posts on load whilst still having the option to scroll up and see the header image full screen.

If I can’t figure out how to do the autoscroll thing I’ll do just that, since reverting back to the default header image on pages and posts will show the content immediately anyway ??

I see your site has some modifications to the 2017 theme that may highlight this particular problem.

I wouldn’t recommend using the ScrollTo plugin because the developers do not address keyboard support issues.

Try installing a plugin that gives you an option to add your own custom JS and then add this:

var $ = jQuery,
	postFlag = 'single-post',
    body = $('body'),
    post = $('#primary', body),
	navigation = $('.navigation-top', body),
	arbitraryOffset = 100;

if (body.hasClass(postFlag)) {
	
	post
		.attr('tabindex', '-1')
		.focus();

    $('html, body').animate({
        scrollTop: post.offset().top - navigation.outerHeight() - arbitraryOffset
    }, 0);
};

https://en-gb.www.ads-software.com/plugins/custom-css-js/

Great, thanks a lot! I modified it a little bit so that it also works on pages, but otherwise it was exactly what I had in mind. Thanks for the awesome help ??