Slider Revolution WP
09.27.2016
Smooth Scroll to Other Page Content
Set up your "Scroll Below" buttons to smoothly scroll to your other page content.
To accomplish this, we’ll use Layer Actions along with some Custom JavaScript.
Normally this can be achieved with the “Scroll Below Slider” Action. But you can also scroll to specific content further down the page using the following technique.
1. Add a "Simple Link" Action to your button.
The important parts for setting up your “Simple Link” Action are to enter your hash-tag (part of page to scroll to) as the “Link URL”, and then make sure the “Link Type” is set to “a Tag Link”.
2. Add the following code to your slider's Custom JavaScript section.
This code does not need to be modified, and will work for all slider buttons where the “Link Url” starts with a “#” character, such as “#contact-section”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
jQuery('body').on('click', 'a.tp-caption', function() { var $this = jQuery(this), href = $this.attr('href'); if(!href || href.charAt(0) !== '#') return; var el = jQuery(href); if(!el.length) el = jQuery('a[name=' + href.substring(1, href.length) + ']'); if(!el.length) return; jQuery('html, body').animate({scrollTop: el.offset().top}, 1000); return false; }); |
