Scroll to the Content on click

This is just fabulous UX in my opinion.

If, as a user, I am interested in some piece of content and make an interaction to view it, then having the website scroll that specific content into view and maximise my viewing of it on the screen just makes sense. It's like the distraction-free view in certain CMS editors: here is the content you want, and minimal distractions from it.

It's kinda like the opposite of click-bait... 

This solution is also not a "mobile only" hack or fix, it works very well on all screens, although you will have to adjust for sticky/static/fixed headers that overlap the page, and which are likely to change height at different breakpoints. 

Also works very well with the Swap Tabs to Accordian on Mobile solution

// FOR ACCORDIANS 
$(".accordion").on('shown.bs.collapse', function() {
	var deviceOffset = window.innerWidth > 768 ? -210 : -130; // You can also change this to traget the innerHeight() of the overlapping element, eg. $('header.fixed').innerHeight();
	$('html, body').animate({scrollTop: $(this).find('.show').siblings('.title').offset().top + deviceOffset}, 'slow');
});

// FOR TABS  
$("#h-tab").on('shown.bs.collapse', function() {
	var deviceOffset = window.innerWidth > 768 ? -210 : -130; // You can also change this to traget the innerHeight() of the overlapping element, eg. $('header.fixed').innerHeight();
	$('html, body').animate({scrollTop: $(this).find('.show').prev('.nav-link').offset().top + deviceOffset}, 'slow');
});