scrolling in Chrome

In the second link it looks like the content is constantly loading as you scroll, preventing you from scrolling down. Is that the issue?

Yes that is part of the issue, the more concering issue is when a user tries to scroll either up/down once they stop scrolling to view the site at any point (usually futher down on both pages) the page starts to scroll up on its own.

How do I fix this?

When I inspected the page and click on ‘Console” in Chrome it show this error:

Attempted to auto-scroll to element with data-scroll-name [], but could not find any elements with that name.

Does the page start scrolling up while the scrollbar is getting smaller?

No the size of the scrollbar does not change. Are you able to view the two links I sent you to see the issue?

I checked the first link but couldn’t replicate it, but now that I check again I see the issue.

Can you try deactivating your plugins to explore whether any could be responsible? If none are it’s likely to be related to your theme, so I would recommend contacting your theme authors about this: https://candyboxmarketing.com

The problem is I can cannot contact the theme authors that isn’t a possibility. I will test the plugins out to see if that is the issue. Isn’t there a way to change this through the code? I think this piece of code is what is triggering the scrolling:

Smooth Scrolling JS

Automatically detects changes to the pages hash and scrolls the user to the corresponding element. Checks on load if there is a hash, and attempts to find it.

Element should be set up with the following attributes:
<div data-scroll-name=’UNIQUENAME’
data-scroll-speed=’Jquery Speed’ optional, defaults to ‘slow’
data-scroll=offset=’-200′ offset in px you’d like the scroll to stop at. Good for accomodating header bars. Defaults to -50.
>

Call the watcher to queue up the doer

*/
//Watcher
function watchForSmoothScrolls(){
jQuery(window).bind(‘hashchange’, function(){
var newHash = location.hash.substring(1);
scrollTo(newHash);
});
var newHash = location.hash.substring(1);
scrollTo(newHash);
}

//Doer
function scrollTo(anchor){
var $elem = jQuery(“[data-scroll-name='”+ anchor +”‘]”);
if($elem.length == 0){
console.warn(‘Attempted to auto-scroll to element with data-scroll-name [‘ + anchor + ‘], but could not find any elements with that name.’);
return false;
}
var scroll_speed = $elem.attr(‘data-scroll-speed’);
if(!scroll_speed){
scroll_speed = ‘slow’;
}
var scroll_offset = parseInt($elem.attr(‘data-scroll-offset’));
if(!scroll_offset){
scroll_offset = -100;
}

jQuery(‘html,body’).animate({scrollTop: ($elem.offset().top + scroll_offset)},scroll_speed);
}

/*

Do you know which file that script contains it? I tried looking but it seems you have an optimisation plugin installed that is collating everything into an unreadable (to humans) format.

The name of the file is cbm-utils.js

This is what is in this file:

/*
Reference: How to use jQuery’s $ function anywhere:

(function( $ ) {

})(jQuery);
*/

//Came with Joints WP, several fixes
function joints_wp_fixes(){
(function( $ ) {
// Remove empty P tags created by WP inside of Accordion and Orbit
$(‘.accordion p:empty, .orbit p:empty’).remove();

// Makes sure last grid item floats left
$(‘.archive-grid .columns’).last().addClass( ‘end’ );

// Adds Flex Video to YouTube and Vimeo Embeds
$(‘iframe[src*=”youtube.com”], iframe[src*=”vimeo.com”]’).each(function() {
if ( $(this).innerWidth() / $(this).innerHeight() > 1.5 ) {
$(this).wrap(“<div class=’widescreen flex-video’/>”);
} else {
$(this).wrap(“<div class=’flex-video’/>”);
}
});
})(jQuery);
}

/*

Smooth Scrolling JS

Automatically detects changes to the pages hash and scrolls the user to the corresponding element. Checks on load if there is a hash, and attempts to find it.

Element should be set up with the following attributes:
<div data-scroll-name=’UNIQUENAME’
data-scroll-speed=’Jquery Speed’ optional, defaults to ‘slow’
data-scroll=offset=’-200′ offset in px you’d like the scroll to stop at. Good for accomodating header bars. Defaults to -50.
>

Call the watcher to queue up the doer

*/
//Watcher
function watchForSmoothScrolls(){
jQuery(window).bind(‘hashchange’, function(){
var newHash = location.hash.substring(1);
scrollTo(newHash);
});
var newHash = location.hash.substring(1);
scrollTo(newHash);
}

//Doer
function scrollTo(anchor){
var $elem = jQuery(“[data-scroll-name='”+ anchor +”‘]”);
if($elem.length == 0){
console.warn(‘Attempted to auto-scroll to element with data-scroll-name [‘ + anchor + ‘], but could not find any elements with that name.’);
return false;
}
var scroll_speed = $elem.attr(‘data-scroll-speed’);
if(!scroll_speed){
scroll_speed = ‘slow’;
}
var scroll_offset = parseInt($elem.attr(‘data-scroll-offset’));
if(!scroll_offset){
scroll_offset = -100;
}

jQuery(‘html,body’).animate({scrollTop: ($elem.offset().top + scroll_offset)},scroll_speed);
}

/*

Full size hero videos

HTML (put directly in banner-block, parent is full size. Have overflow hidden.)
<div id=’hero-vid-holder’>
<iframe src=”https://player.vimeo.com/video/&lt;?= $hero_vid ?>?background=1&loop=1″ width=”100%” height=”100%” frameborder=”0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

CSS
#hero-vid-holder {
width: 100%;
height: 775px;
iframe {
width: 100%;
height: 100%;
}
}
*/

//Watcher
function watchForHeroVideos(){
jQuery(window).on(‘resize’, heroVideoSizer).resize();
}

//Doer
function heroVideoSizer(){
$container = jQuery(‘#hero-vid-holder’);
aspect_ratio = 9 / 16;
min_height = $container.parent().height();
window_width = jQuery(window).width();
container_height = aspect_ratio * window_width;

if(container_height < min_height){
//Center the vid
margin_left = -1 * ((min_height – container_height) / 2);

//Set the width
container_width = min_height / aspect_ratio;
container_height = ‘100%’;

} else {
//Set the height
container_width = ‘100%’;
margin_left = ‘0px’;
}

$container
.css(‘height’, container_height)
.css(‘width’, container_width)
.css(‘margin-left’, margin_left);
}

/*

For when you have to validate an email. Works with black magic

*/
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}

/*

Video modals

Simple use:
<div data-video-url='<?= $url ?>’>Video!</div>

With an image + mask
<div class=”video-with-overlay” data-video-url='<?= $url ?>’>
” />
<div>
/assets/images/homepage-video-mask.png” />
<i class=”fa fa-play-circle-o” aria-hidden=”true”></i>
</div>
</div>
*/

function registerVideoModals(){
jQuery(“[data-video-url]”).each(function(){
$this = jQuery(this);
video_url = $this.attr(“data-video-url”);

if (/vimeo/i.test(video_url)) {
//IN
// https://vimeo.com/16536655
//OUT
// https://player.vimeo.com/video/16536655
video_id = /[^/]*$/.exec(video_url)[0];
video_iframe_src = “https://player.vimeo.com/video/&#8221; + video_id;
this_id = “video-modal-” + guid();
iframe = jQuery(“<iframe src='” + video_iframe_src + “‘ frameborder=’0′ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>”);
close_button = jQuery(“<button class=’close-button’ data-close aria-label=’Close video’ type=’button’>”)
.append(jQuery(‘<i class=”fa fa-times-circle-o” aria-hidden=”true”></i>’));
modal = jQuery(“<div class=’reveal video-modal’ id='” + this_id + “‘ data-reveal data-reset-on-close=’true’>”)
.append(close_button)
.append(iframe);

jQuery(“body”).append(modal);

$this.attr(“data-open”, this_id);

var elem = new Foundation.Reveal(modal);
}

});
}

function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + ‘-‘ + s4() + ‘-‘ + s4() + ‘-‘ +
s4() + ‘-‘ + s4() + s4() + s4();
}

function bindFileUploads(){
jQuery(‘.gf_file_upload input’).bind(‘change’, function(){
fpath = jQuery(this).val();
filename = fpath.split(“\\”).pop();
jQuery(‘.gf_file_upload label’).attr(‘data-filename’, filename).attr(‘data-status’, ‘DONE’);

});
}

Sorry I can’t debug it still because of the way it is collated: https://9gxta41i2c323xbdqcb8o54u.wpengine.netdna-cdn.com/wp-content/cache/autoptimize/js/autoptimize_845bee9aba6da98b0d3839c22498d191.js

tip; try adding ?ao_noptimize=1 to the URL @anevins, that should disable autoptimize for that request ??

Can I email you the file?

Thanks @optimizingmatters, unfortunately I need the OP to deactivate the optimisation plugin to use Chrome’s breakpoint tools and read what’s going on.