I wrote a simple script to create a "smooth scroll" effect when a specific link is clicked:
(function() {
'use strict';
// Checking for compatibility
if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
// Function for smooth scrolling
var smoothScroll = function (anchor, duration) {
// Calculating scroll distance and speed
var startLocation = window.pageYOffset;
var endLocation = anchor.offsetTop;
var distance = endLocation - startLocation;
var increments = distance/(duration/16);
var stopAnimation;
// Animating the scroll
var animateScroll = function () {
window.scrollBy(0, increments);
stopAnimation();
};
/....Other code not relevant to the question./
Interval(animateScroll, 16);
};
// Selecting smooth scroll links
var scrollToggle = document.querySelectorAll('.scroll');
// Looping through each smooth scroll link
[].forEach.call(scrollToggle, function (toggle) {
// When the smooth scroll link is clicked
toggle.addEventListener('click', function(e) {
// Preventing default link behavior
e.preventDefault();
// Getting anchor link and calculating distance from the top
var dataID = toggle.getAttribute('href');
var dataTarget = document.querySelector(dataID);
var dataSpeed = toggle.getAttribute('data-speed');
// Scrolling to the anchor
if (dataTarget) {
smoothScroll(dataTarget, dataSpeed || 500);
}
}, false);
});
}
When I click on a link with the class .scroll, the page scrolls smoothly down to the target anchor. Everything worked fine until I added a slideshow using the jmpress plugin. Now the smooth scroll feature no longer works. Can anyone familiar with the jmpress plugin help me understand why they might be conflicting?
Apologies for any language errors.