Offset Anchor Point scrolling

Word Count: 100
  • Post category:Codings
  • Post last modified:2022-06-23

To have a more precise control of the scrolling to an ‘a’ tag, or anchor point, two methods can be considered depending on situations.

Method 1 – CSS approach

<!–
<a id=”cu-contact-us”></a>
<style>
    a#cu-contact-us {
        /** offset the anchor position  **/
        display: block;
        position: relative;
        top: -290px;
        visibility: hidden;
    }
</style>
–>

 

Method 2 – jQuery

<?php 
if (get_query_var(‘cu_scroll_page’) == ‘yes’) :
    echo “<script type=’text/javascript’>
    jQuery(window).load(function() {
    jQuery(‘html, body’).animate({ scrollTop: jQuery(‘#cu-headline’).offset().top }, 850);
    });
    </script>”; 
endif;
?>
Tags: , , ,