Snap Scroll does not work

Hey Jasper_1,

Thank you for the inquiry.

How did you load or initialize the script? Did you use the wp_enqueue_script function?

// https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Best regards,
Ismael

Hi,

We are not familiar with the script unfortunately, and we are not really sure what it does. How did you initialize it? Would you mind providing a link to the documentation?

Best regards,
Ismael

Hi,
Thanks for the link to your site, I see you are getting this error: Uncaught TypeError: $ is not a function this is because the code you added to the code block is this:

<script>
    var snapScroll = $(".av-layout-grid-container").SnapScroll({
        hashes: true
    });
    console.log(snapScroll);
</script>

the problem is that your script needs to be wrapped like this:

<script>
(function($){
    var snapScroll = $(".av-layout-grid-container").SnapScroll({
        hashes: true
    });
    console.log(snapScroll);
})(jQuery);
</script>

this should solve the error, if you are forcing jQuery into your footer try this:

<script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
    var snapScroll = $(".av-layout-grid-container").SnapScroll({
        hashes: true
    });
    console.log(snapScroll);
})(jQuery);
});
</script>

If this doesn’t correct please include admin login in the Private Content area so we can investigate.

Best regards,
Mike

Hi,
Glad to hear this helped, for mobile it looks like you are overriding the 100vh with 100%!important:

@media only screen and (max-width: 480px){
.av-layout-grid-container {
    height: 100% !important;
}
}

I recommend using 100vh;
and for the inner container you are adding: height: auto !important;

media only screen and (max-width: 767px){
.responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    float: left;
    clear: none;
    width: 100%;
}
}

I recommend setting the height to 50vh like this:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main .av-flex-cells .no_margin {
    height: 50vh !important;
}
}

and changing the top padding for mobile to 20px from the current 70px, this looks like the text will then fully show, you could also tweak the font size a little or change the image height a little to allow more room for the text.

Best regards,
Mike

Hi,
Try changing your code block script to this to only allow it to run on screens above 767px:

<script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
	var width = $(window).width();
	if (width >= 767) {
    var snapScroll = $(".av-layout-grid-container").SnapScroll({
        hashes: true
    });
    console.log(snapScroll);
    }
})(jQuery);
});
</script>

If you test with Dev Tools you must reload the page when emulating a mobile device, this will work correctly on actual devices.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike