【実装例】
https://www.corp-alfred.com/about-web/


【HTMLサンプル】
<section class="click-scroll-title">
	<a href="#about-seo"><h2 class="right scroll-title01">徹底したSEO対策</h2></a>
</section>

<section id="about-seo">このsection内でSEOについて説明</section>


【css】
.click-scroll-title a{
	text-decoration:none;
}

.click-scroll-title h2{
    background-color: #ca151d;
    color: #fff;
    width: 100%;
    padding: 10px;
}
.click-scroll-title h2:after{
	font-family:'dashicons';
	content: "\f347";
    vertical-align: middle;
    padding: 9px;
}


【jQuery】

//ページ内スクロール
	$(document).on('click', 'a[href*="#"]', function() {
		let time = 400;
		var headerHeight = $('.site-header').outerHeight();
		let target = $(this.hash);
		if (!target.length) return;

		let targety = target.offset().top;
		let targetY = targety - headerHeight;
		$('html,body').animate({scrollTop: targetY}, time, 'swing');
		return false;
	});