scroll-margin-top & scroll-padding-top css properties

Hey keeslamper,
According to the Scroll Snap Model you need to use the scroll-snap-type property and the overflow needs to be scroll. I’m not very familiar with all of the settings for the elements or the parent elements, it is not used in the theme, but this article may help.
A few points that I found is that scroll-snap will not work with a fixed header and the scroll-snap-type & overflow needs to be on the html like this:

html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
#main > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

But I believe that the smooth scroll js interfere with this css. I have ask the rest of the team for advise, Thank you for your patience.

Best regards,
Mike

Hi,

Thank you for the info.

It might not be working because of the AviaScrollSpy script which handles scrolling for anchor links and overrides the default scrolling behavior. Instead of using the scroll-margin-top, try to add the following filter in the functions.php file.

function avf_header_setting_filter_mod($header) {
	$header['header_scroll_offset'] = $header['header_scroll_offset'] + 100;
	return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

This will add a 100px offset from the original scroll position.

Best regards,
Ismael

Hi,

The filter should also work on mobile view. Have you tried purging the cache and doing a hard refresh? Please try to set a bigger offset for testing.

Best regards,
Ismael

Hi,

The script runs on mobile view but looks like it doesn’t apply the offset. Would you mind providing a screenshot of where the anchor lands on mobile view?

Thank you for your patience.

Best regards,
Ismael

Hi,
For mobile try this slow scroll to anchor with offset function in your child theme functions.php, I tested in on your page by injecting it in the browser and it seemed to work well.

function slow_scroll_to_anchor_with_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if ((width <= 767)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 80 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 80 //offset
        }, 1000);
        return false;
      }
    }
    } else {}
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'slow_scroll_to_anchor_with_offset', 99 );

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