Navigate to a specific section on a different page while excluding a distance of X

Question

Navigate to a specific section on a different page while excluding a distance of X

I've implemented the script below to execute the action mentioned in the title.

    <script type="text/javascript">
              var jump=function(e)
      {
         if (e){
             e.preventDefault();
             var target = $(this).attr("href");
         }else{
             var target = location.hash;
         }

         $('html,body').animate(
         {
             scrollTop: $(target).offset().top
         },1000,function()
         {
             location.hash = target;
         });

      }

      $('html, body').hide();

      $(document).ready(function()
      {
          $('a[href^=#]').bind("click", jump);

          if (location.hash){
              setTimeout(function(){
                  $('html, body').scrollTop(0).show();
                  jump();
              }, 0);
          }else{
              $('html, body').show();
          }
      });
      </script>

The functionality works perfectly, but I encounter an issue with my fixed header overlapping the div after scrolling. To address this, I aim to adjust the scroll target by subtracting 80px. How can I update the code to achieve this modification?

You can view a live version of this on

robertkoh.net/Electrotemp/index.html

If you click on 'ducted vacuum systems', it will direct you to the products and services page and scroll to the relevant section. However, you'll notice that the fixed header partially covers the content.

javascript animation scroll

Answer 1

Answer №1

Solution 1: Deduct 80 pixels without resetting location.hash

To achieve this, simply modify the code snippet below:

 $('html,body').animate({
     scrollTop: $(target).offset().top
 }, 1000, function() {
     location.hash = target;
 });

With the following updated code:

 $('html,body').animate({
     scrollTop: $(target).offset().top - 80
 }, 1000);

The addition of - 80 subtracts 80 pixels from the scrolling distance.
By removing location.hash = target;, you prevent the page from jumping back to its previous position after the animation completes. This behavior was triggered by resetting the hash tag, causing the browser to scroll back up. Note that internal hash links within the site will no longer update the URL bar hash tag.

Solution 2: Place your content in a separate scrollable <div>

Create a new <div id="container"> starting after  and before </body>.
Replace $('html,body').animate({ with $('#container').animate({.
Remove margin-top: 70px; from the .titlebar style.

Apply the following CSS for the #container element:

#container {
    position: fixed;
    top: 70px;
    bottom: 0;
    left: 0;
    overflow: auto; /* enable scrolling */
}

This approach offers several benefits:

No need for the - 80 adjustment.
No requirement to remove location.hash = target;.
Browsers without JavaScript enabled can still navigate to the correct position smoothly.

Answer 2

Solution 1: Deduct 80 pixels without resetting location.hash

To achieve this, simply modify the code snippet below:

 $('html,body').animate({
     scrollTop: $(target).offset().top
 }, 1000, function() {
     location.hash = target;
 });

With the following updated code:

 $('html,body').animate({
     scrollTop: $(target).offset().top - 80
 }, 1000);

The addition of - 80 subtracts 80 pixels from the scrolling distance.
By removing location.hash = target;, you prevent the page from jumping back to its previous position after the animation completes. This behavior was triggered by resetting the hash tag, causing the browser to scroll back up. Note that internal hash links within the site will no longer update the URL bar hash tag.

Solution 2: Place your content in a separate scrollable <div>

Create a new <div id="container"> starting after  and before </body>.
Replace $('html,body').animate({ with $('#container').animate({.
Remove margin-top: 70px; from the .titlebar style.

Apply the following CSS for the #container element:

#container {
    position: fixed;
    top: 70px;
    bottom: 0;
    left: 0;
    overflow: auto; /* enable scrolling */
}

This approach offers several benefits:

No need for the - 80 adjustment.
No requirement to remove location.hash = target;.
Browsers without JavaScript enabled can still navigate to the correct position smoothly.

Navigate to a specific section on a different page while excluding a distance of X

Answer №1

Similar questions

Changing a callback function into a promise in Node.js for OpenTok integration

Extension for Chrome that enhances YouTube video playback experience

The Vue.js Vuetify.js error message is saying "A mystery custom element: <v-list-item>, <v-list-item-title> - Have you properly registered the component?"

Error: The term "Worker" is undefined in a new Nextjs project

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

Refresh the form fields using PHP_SELF after submission

Remove movable element from react-dnd

FixPermissions not working properly | Discord.js EXPERT

What is the resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

Console log is not displaying the JSON output

Integrating DHTMLX Scheduler with Node JS for seamless scheduling solutions

Establishing a TCP connection to a server using Javascript

Words next to picture

What is the best way to reach a link using Selenium?

The search function on my blog is not displaying the blogs that have been filtered

A guide on using jQuery to iterate through 3 separate div elements

What is the process for transferring information from a Ruby controller to an application JavaScript using AJAX?

A method for reversing specific characters within lengthy strings

Flickering effects in THREE.js using Frame Buffer Objects

Does a Javascript event get triggered when the currentSrc attribute of an <img> element is modified?