Tips for gently scrolling instead of quickly scrolling all at once

Question

Tips for gently scrolling instead of quickly scrolling all at once

As a novice in HTML, I have a question about navigation to an ID targeted by an anchor tag. For example:

When I execute this code, it quickly jumps to the specified ID but I would like to incorporate animations. Is there a way to achieve this?

javascript html css

Answer 1

Answer №1

To achieve a smooth page scroll to an anchor on the same page, you can utilize jQuery.

Check out this code snippet that includes logic to differentiate jump links from other links:

// Identifying all links with hashes
$('a[href*="#"]')
  // Removing links that do not lead anywhere
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // Links within the same page
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Determining the element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      
      // Checking if a scroll target exists
      if (target.length) {
        // Preventing default only if there will be an animation
        event.preventDefault();
        
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Changing focus is necessary!
          var $target = $(target);
          $target.focus();
          
          // Verifying if the target was focused
          if ($target.is(":focus")) { 
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for non-focusable elements
            $target.focus(); // Setting focus again
          };
        });
      }
    }
  });

Answer 2

To achieve a smooth page scroll to an anchor on the same page, you can utilize jQuery.

Check out this code snippet that includes logic to differentiate jump links from other links:

// Identifying all links with hashes
$('a[href*="#"]')
  // Removing links that do not lead anywhere
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // Links within the same page
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Determining the element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      
      // Checking if a scroll target exists
      if (target.length) {
        // Preventing default only if there will be an animation
        event.preventDefault();
        
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Changing focus is necessary!
          var $target = $(target);
          $target.focus();
          
          // Verifying if the target was focused
          if ($target.is(":focus")) { 
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for non-focusable elements
            $target.focus(); // Setting focus again
          };
        });
      }
    }
  });

Answer 3

Answer №2

Your HTML code might look something like this:

<a href = "#start-heading">Jump to start of content</a>
<div id = "table-of-contents">...</div>
<h1 id = "start-heading">Chapter 1</h1>

Implement the following JavaScript for smooth scrolling when clicking on the start heading:

document.querySelector("#start-heading").onclick = e=>{
  this.scrollIntoView({ 
    behavior: 'smooth' 
  });
  e.preventDefault();
  return false;
};

document.querySelector("#start-heading").onclick = e=>{
  document.querySelector(this.href).scrollIntoView({ 
    behavior: 'smooth' 
  });
  e.preventDefault();
  return false;
};

<a href = "#start-heading">Jump to start of content</a>
<div id = "table-of-contents">
  <!-- Content of the table of contents here -->
</div>
<h1 id = "start-heading">Chapter 1</h1>
<!-- More content related to Chapter 1 -->
<p>
<!-- Bacon ipsum and other placeholder text here -->
</p>

<script>
// Smooth scroll polyfill script
// Author: Dustan Kasten, Jeremias Menichelli
// Source: https://iamdustan.github.io/smoothscroll

(function(w, d, undefined) {
  'use strict';

  /* Rest of the script goes here */

})(window, document);</script>

Answer 4

Your HTML code might look something like this:

<a href = "#start-heading">Jump to start of content</a>
<div id = "table-of-contents">...</div>
<h1 id = "start-heading">Chapter 1</h1>

Implement the following JavaScript for smooth scrolling when clicking on the start heading:

document.querySelector("#start-heading").onclick = e=>{
  this.scrollIntoView({ 
    behavior: 'smooth' 
  });
  e.preventDefault();
  return false;
};

document.querySelector("#start-heading").onclick = e=>{
  document.querySelector(this.href).scrollIntoView({ 
    behavior: 'smooth' 
  });
  e.preventDefault();
  return false;
};

<a href = "#start-heading">Jump to start of content</a>
<div id = "table-of-contents">
  <!-- Content of the table of contents here -->
</div>
<h1 id = "start-heading">Chapter 1</h1>
<!-- More content related to Chapter 1 -->
<p>
<!-- Bacon ipsum and other placeholder text here -->
</p>

<script>
// Smooth scroll polyfill script
// Author: Dustan Kasten, Jeremias Menichelli
// Source: https://iamdustan.github.io/smoothscroll

(function(w, d, undefined) {
  'use strict';

  /* Rest of the script goes here */

})(window, document);</script>

Answer 5

Answer №3

For a detailed array of techniques for achieving smooth scrolling effects, please refer to my response here.

You have the option to configure the CSS property scroll-behavior with a value of smooth. This setting enables a smooth scrolling experience when clicking on anchor tags that target specific elements.

html, body{
  scroll-behavior: smooth;
}
a, a:visited{
  color: initial;
}

<a href="#elem">Scroll To Element</a>
<div id="elem" style="margin: 500px 0px;">Div</div>

To achieve precise scrolling positions within a defined time frame, window.requestAnimationFrame can be utilized by calculating the correct positioning continuously. In cases where requestAnimationFrame is not supported, setTimeout serves as an alternative method.

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

/*
   @param time: the exact amount of time the scrolling will take (in milliseconds)
   @param pos: the y-position to scroll to (in pixels)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 300)">
Scroll To Div (300ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 200)">
Scroll To Div (200ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 100)">
Scroll To Div (100ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 50)">
Scroll To Div (50ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 1000)">
Scroll To Div (1000ms)
</button>
<div style="margin: 500px 0px;">
DIV<p/>
<button onClick="scrollToSmoothly(0, 500)">
Back To Top
</button>
<button onClick="scrollToSmoothly(document.body.scrollHeight)">
Scroll To Bottom
</button>
</div>
<div style="margin: 500px 0px;">
</div>
<button style="margin-top: 100px;" onClick="scrollToSmoothly(500, 3000)">
Scroll To y-position 500px (3000ms)
</button>

For intricate scenarios, consider utilizing the SmoothScroll.js library, which supports smooth scrolling in both vertical and horizontal directions, operation within various container elements, diverse easing behaviors, relative scrolling adjustments, and more.

var easings = document.getElementById("easings");
for(var key in smoothScroll.easing){
    if(smoothScroll.easing.hasOwnProperty(key)){
        var option = document.createElement('option');
        option.text = option.value = key;
        easings.add(option);
    }
}
document.getElementById('to-bottom').addEventListener('click', function(e){
    smoothScroll({yPos: 'end', easing: easings.value, duration: 2000});
});
document.getElementById('to-top').addEventListener('click', function(e){
    smoothScroll({yPos: 'start', easing: easings.value, duration: 2000});
});

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95c6f8fafae1fdc6f6e7faf9f9d5a4bba7bba5">[email protected]</a>/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<!-- Extracted from one of the library examples -->
Easing: <select id="easings"></select>
<button id="to-bottom">Scroll To Bottom</button>
<br>
<button id="to-top" style="margin-top: 5000px;">Scroll To Top</button>

Answer 6

For a detailed array of techniques for achieving smooth scrolling effects, please refer to my response here.

You have the option to configure the CSS property scroll-behavior with a value of smooth. This setting enables a smooth scrolling experience when clicking on anchor tags that target specific elements.

html, body{
  scroll-behavior: smooth;
}
a, a:visited{
  color: initial;
}

<a href="#elem">Scroll To Element</a>
<div id="elem" style="margin: 500px 0px;">Div</div>

To achieve precise scrolling positions within a defined time frame, window.requestAnimationFrame can be utilized by calculating the correct positioning continuously. In cases where requestAnimationFrame is not supported, setTimeout serves as an alternative method.

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

/*
   @param time: the exact amount of time the scrolling will take (in milliseconds)
   @param pos: the y-position to scroll to (in pixels)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 300)">
Scroll To Div (300ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 200)">
Scroll To Div (200ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 100)">
Scroll To Div (100ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 50)">
Scroll To Div (50ms)
</button>
<button onClick="scrollToSmoothly(document.querySelector('div').offsetTop, 1000)">
Scroll To Div (1000ms)
</button>
<div style="margin: 500px 0px;">
DIV<p/>
<button onClick="scrollToSmoothly(0, 500)">
Back To Top
</button>
<button onClick="scrollToSmoothly(document.body.scrollHeight)">
Scroll To Bottom
</button>
</div>
<div style="margin: 500px 0px;">
</div>
<button style="margin-top: 100px;" onClick="scrollToSmoothly(500, 3000)">
Scroll To y-position 500px (3000ms)
</button>

For intricate scenarios, consider utilizing the SmoothScroll.js library, which supports smooth scrolling in both vertical and horizontal directions, operation within various container elements, diverse easing behaviors, relative scrolling adjustments, and more.

var easings = document.getElementById("easings");
for(var key in smoothScroll.easing){
    if(smoothScroll.easing.hasOwnProperty(key)){
        var option = document.createElement('option');
        option.text = option.value = key;
        easings.add(option);
    }
}
document.getElementById('to-bottom').addEventListener('click', function(e){
    smoothScroll({yPos: 'end', easing: easings.value, duration: 2000});
});
document.getElementById('to-top').addEventListener('click', function(e){
    smoothScroll({yPos: 'start', easing: easings.value, duration: 2000});
});

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95c6f8fafae1fdc6f6e7faf9f9d5a4bba7bba5">[email protected]</a>/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<!-- Extracted from one of the library examples -->
Easing: <select id="easings"></select>
<button id="to-bottom">Scroll To Bottom</button>
<br>
<button id="to-top" style="margin-top: 5000px;">Scroll To Top</button>

Tips for gently scrolling instead of quickly scrolling all at once

Answer №1

Answer №2

Answer №3

Similar questions

Struggling to Make Text Overlay Transparent and Slide Only to the Right

Troubleshooting issue: Bootstrap not loading with custom CSS on Flask platform

Issue with Vue's v-autocomplete component not clearing the user's typed text when an item is selected from

Send PS3 through user agent for redirection

Conceal location labels in maps provided by tilehosting.com

A simple guide to viewing a sequential list of loaded stylesheets in Google Chrome

Encountering silence: React JS fetch call left unanswered by Sinatra server

Activating the spinning wheel page-loading indicator in the browser through Socket.IO

Transformation of Array of Objects to Array of Values using Node.js

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

Use ng-repeat to dynamically calculate the sum of values in a textbox in AngularJS

What could be the reason for the absence of definition for 'res'?

Ways to conceal components upon clicking a different element

Effective HTML element placement with CSS styling

Loop through each item in order to modify the text within the pop-up using a for loop

Show ng-message when email is invalid in Angular Material without using ng-pattern

Steps to verify if a value is an integer:

Ways to automatically style the child divs within a parent div

Angular: Assigning a key from one variable to a value in another

Creating a CSS full-width navigation menu