Home Page Navigation Scroll + Parallax Scroll - not working

Hi everyone, 

Straight up I'm not a coder but I'm trying to achieve two things on my page:

1. Smooth Home page navigation scroll using anchors 

2. Parallax Scroll where images are blocked in the background and the next section overlaps as you scroll down.

Both codes work idividually, however when I combine both in the Custom CCS section, the Parallax code works and the smooth navigation stops working. What happens is when I click on a menu item, it jumps straight to that section and I loose that "smooth scroll" effect. 

Can you guys help me out? is it possible to have both effects?

I've posted the codes I'm using at the end. 

Thanks in advance!

Jen

This one in the CSS Custom section: 

{
scroll-behavior: smooth;
}

This one in the Code Injection Footer section: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Hi,

Are you on a version 7 or version 7.1 site? I have the same parallax code on my 7.1 site and have just tested with the smooth scrolling anchor link and it works. Have you got a link to your site also?

Also for your css code for the smooth scrolling is it the below, as cant see the html bit mentioned above 🙂 ?

html {
scroll-behavior: smooth;
}

Hi Erika, 

Thanks for your message. I'm using version 7.1. 

About the html part, yes you are right, I had the html there but accidentally left it out when copy/pasting. 

I will send you the link to my site by message. 

Thanks again.