html 在Rainmaker站点上滚动视差部分的解决方法。允许创建点击进入“继续阅读”按钮。

Posted 2021-05-11

<!-- 
Button links with a data-section attribute can be used in
text content areas to autoscroll to the first element with 
the class name specified in data-section.
-->

<!-- Home Section 1 text widget: -->
<a class="button" href="#" data-section="home-section-2">Continue Reading</a>

<!-- Home Section 2 text widget -->
<a class="button" href="#" data-section="home-section-3">Continue Reading</a>

<!-- Home Section 3 text widget -->
<a class="button" href="#" data-section="home-section-4">Continue Reading</a>

<!-- Home Section 4 text widget -->
<a class="button" href="#" data-section="home-section-5">Continue Reading</a>

<!-- Buttons without the data-section attribute will be treated like regular links (no scroll) -->
<a class="button" href="http://example.com/contact/">Get in touch</a>

<script>
// This script goes in Design > Appearance > Scripts > Footer Scripts
// Be sure to copy the opening and closing script tags too.
jQuery(function ($) {
	$(".home .button").click(function (e) {
		var elementToScrollTo = $(this).data('section');
		
		if (!elementToScrollTo) return;
		
		$('html, body').animate({
			scrollTop: $('.' + elementToScrollTo).offset().top
		}, 1000);
		e.preventDefault();
	});
});
</script>