Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 31, 2023 at 12:00 pm #1415025
    chesterrees

    Hi, I’ve built my website around the ‘enfold-one-page-portfolio’ demo and can not for the life of me work out what is going on with the fixed header and anchor scrolling interaction.

    Sometimes the anchor links work perfectly, and other times there is a buffer equal to the ‘header’ size, and other times the ‘header’ is a header height too far down the page past the id=#anchor link.

    I’ve tried every workaround under the sun, which seems to work until I refresh or resize the screen.

    Because I started with the one-page-portfolio demo, is there some JS or CSS code that is evading me and is controlling anchor link interactions?

    Any help would be much appreciated, thank you.

    p.s. you will see a ‘ghost’ div with ‘top: -85px’ in order to attempt to offset the header, which works some of the time, but not others…. super weird

    August 1, 2023 at 6:37 am #1415114
    Ismael

    Hey chesterrees,

    Thank you for the inquiry.

    The anchors seem to be working as expected, even on smaller screens or when we resize the browser. Would you mind sharing a short clip of the of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share media files.

    Best regards,
    Ismael

    August 1, 2023 at 11:41 am #1415130
    chesterrees

    Okay, I think your reply helped me narrow down what is happening…

    Just a theory, but I think the fixed header scrolling issue is only present when I refresh inside a devtools resizeable window.

    I’ve attached a video below of me firstly refreshing the page, and seeing that the anchor links work in full-screen. I then toggle the ‘device toolbar’ in devtools and refresh the page – this time the anchor links are broken (with fixed header).

    Let me know if you have any insight into what is going on, I’ve spent way too much time chasing my tail for a non-issue (lol). I just tested across multiple browsers and mobile devices myself and it works as expected like you mention (as long as the devtools>device toolbar is not open).

    Thanks for your help :)

    August 6, 2023 at 7:23 pm #1415660
    Mike

    Hi,
    Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_anchor_offset_with_slow_scroll() { ?>
  <script>
(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
  	var width = $(window).width()
    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) {
      	if ($(window).width() < 768) {
        $('html,body').animate({
          scrollTop: target.offset().top - 80 //offsets for fixed header
        }, 1000);
        return false;
      } else {
      	$('html,body').animate({
          scrollTop: target.offset().top - 80 //offsets for fixed header
        }, 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) {
      	if ($(window).width() < 768) {
        $('html,body').animate({
          scrollTop: target.offset().top - 80 //offset height of header here too.
        }, 1000);
        return false;
      } else {
      	$('html,body').animate({
          scrollTop: target.offset().top - 80 //offset height of header here too.
        }, 1000);
        return false;
      }
      } 
    }
}(jQuery));
</script>
  <?php
}
add_action('wp_footer', 'custom_anchor_offset_with_slow_scroll');

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    Then clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.