Hello, I have managed to add an ID to a section below and allow a button click to scroll into that particular section. However, the speed of scroll is way too fast.
How do I slow down the speed of scrolling?
Thank you.
Hi,
Thanks for writing in!
You can add this in Theme Opions > JS
// Setup ScrollSpy Functionality
// =============================================================================
jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchend click');
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
if ( $('body').hasClass('x-navbar-fixed-top-active') ) {
var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
} else {
var navbarFixedTopHeight = $('.x-masthead').outerHeight();
}
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').on('touchend click', function(e) {
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
animateOffset($el, 850, 'easeInOutExpo');
}
}
});
//
// Initialize scrollspy.
//
if ( $body.hasClass('x-one-page-navigation-active') ) {
$body.scrollspy({
target : '.x-nav-wrap.desktop',
offset : adminbarHeight + navbarFixedTopHeight
});
//
// Refresh scrollspy as needed.
//
$(window).resize(function() {
$body.scrollspy('refresh');
});
var timesRun = 0;
var interval = setInterval(function() {
timesRun += 1;
var newBodyHeight = $body.outerHeight();
if ( newBodyHeight !== bodyHeight ) {
$body.scrollspy('refresh');
}
if ( timesRun === 10 ) {
clearInterval(interval);
}
}, 500);
}
});
Then change 850 in animateOffset($el, 850, 'easeInOutExpo'); to adjust the speed.
Hope that helps.
Hi, thanks for your reply! When I pasted this code into the JS section, the button did not respond at all (previously it scrolled very fast).
I have tried pasting in the Global JS and also at the page’s JS.
Hi,
Did you try to change 850 in the code to a higher number?
Please provide us your site url so we can take a closer look.
Thanks
Hi,
Yes, i have tried changing, but to no avail. The button will not work once i put in the code.
I have included a secure note, please check.
Thanks! 
Hi again,
I checked the link you shared in secure note but I couldn’t find any button on that page. Can you please share the exact page URL so we can take a look? However I did check your setup and I see the site’s content is being served by the Endurance cache, please clear the endurance cache first and try to disable it temporarily by going to Settings > General and see if this resolves the issue. If this doesn’t help then try replacing the previous code with the following code:
jQuery(document).ready(function($) {
var $body = $('body');
var bodyHeight = $body.outerHeight();
var adminbarHeight = $('#wpadminbar').outerHeight();
var navbarFixedTopHeight = $('.x-masthead').outerHeight();
var locHref = location.href;
var locHashIndex = locHref.indexOf('#');
var locHash = locHref.substr(locHashIndex);
var dragging = false;
$body.on('touchmove', function() {
dragging = true;
} );
$body.on('touchstart', function() {
dragging = false;
} );
//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//
function animateOffset( element, ms, easing ) {
$('html, body').animate({
scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
}, ms, easing);
}
//
// Page load offset (if necessary).
//
$(window).load(function() {
if ( locHashIndex !== -1 && $(locHash).length ) {
animateOffset(locHash, 1, 'linear');
}
});
//
// Scroll trigger.
//
$('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
console.log($('.hm1.x-bar-fixed').outerHeight());
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
if (dragging) {
return;
}
if( $('.x-anchor-toggle').hasClass('x-active') ) {
$('.x-anchor-toggle').click();
}
animateOffset($el, 850, 'xEaseInOutExpo');
}
}
});
});
Don’t forget to clear the cache including your browser’s cache after adding the code. Let us know how this goes!
Hello!
This second code works! The first code (in your previous reply) still doesn’t work.
However, this second code - the button (i just newly added) on the desktop works, whereas for the button (which is visible only on mobile devices) does not work.
Basically, i created 2 buttons - 1 for desktop views, 1 for mobile views.
The button in mobile view does not work 
Hi again,
I checked your setup and I see you’ve given same ID to both desktop and mobile sections and both buttons are referencing to the same ID. Please give unique / different ID’s to desktop and mobile section so your desktop and mobile buttons can reference to different sections.
This should fix the issue, let us know how this goes!
Yes it works now!!! THank you!