How can you implement window.scrollTo animation in JavaScript without using jQuery?

Question

How can you implement window.scrollTo animation in JavaScript without using jQuery?

Despite my efforts to find a solution written in JavaScript, I keep getting answers related to jQuery. So, how can I implement animation using window.scrollTo in pure JavaScript? I tried using setInterval but it didn't work. Any assistance on this matter would be greatly appreciated.

javascript

Answer 1

Answer №1

After hours of searching, I finally discovered the solution to smoothly scroll by passing this object:

window.scrollTo({
  top: selectedFrame.offsetTop,
  left: 0,
  behavior: 'smooth'
});

Please note that the smooth option may not be supported in Safari.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

Answer 2

After hours of searching, I finally discovered the solution to smoothly scroll by passing this object:

window.scrollTo({
  top: selectedFrame.offsetTop,
  left: 0,
  behavior: 'smooth'
});

Please note that the smooth option may not be supported in Safari.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

Answer 3

Answer №2

Give this a try.

window.scrollTo(0, 0);

I personally recommend using this method to smoothly scroll from the bottom to the top of the page using JavaScript.

Alternatively:

HTML

<button onclick="scrollToTop(3000);"></button>

Javascript

 function scrollToTop(scrollDuration) {
  var scrollStep = -window.scrollY / (scrollDuration / 15),
    scrollInterval = setInterval(function(){
    if ( window.scrollY != 0 ) {
        window.scrollBy( 0, scrollStep );
    }
    else clearInterval(scrollInterval); 
 },15);
}

Answer 4

Give this a try.

window.scrollTo(0, 0);

I personally recommend using this method to smoothly scroll from the bottom to the top of the page using JavaScript.

Alternatively:

HTML

<button onclick="scrollToTop(3000);"></button>

Javascript

 function scrollToTop(scrollDuration) {
  var scrollStep = -window.scrollY / (scrollDuration / 15),
    scrollInterval = setInterval(function(){
    if ( window.scrollY != 0 ) {
        window.scrollBy( 0, scrollStep );
    }
    else clearInterval(scrollInterval); 
 },15);
}

Answer 5

Answer №3

Here's the solution that did the trick for me:

function scrollToElement(id) {
    var targetElement = document.getElementById(id);
    document.body.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth'
    });
}

Answer 6

Here's the solution that did the trick for me:

function scrollToElement(id) {
    var targetElement = document.getElementById(id);
    document.body.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth'
    });
}

Answer 7

Answer №4

I implemented a sophisticated scrolling function inspired by the insights shared by @SachinShah above to cater to my specific requirements.

This could be beneficial for someone else facing similar needs.

Before delving into its functionality, let me outline what it accomplishes:

It smoothly scrolls to a designated element's id
Follows a specified duration seamlessly
Offers an option to adjust the target offset, particularly useful when dealing with sticky/smart headers
Allows control over the smoothness of the scroll using setInterval function

Please bear in mind that:

The method utilizes the relative scrolling approach window.scrollBy, necessitating the determination of scrollDirection (up/down) within the logic
Both scrollDuration and scrollSmoothness are measured in milliseconds

/**
 * Scroll to the top of the page in a specified duration(ms) and smoothness(ms)
 * ref: https://stackoverflow.com/a/52478645/3556531
 * @param {String} elementID
 * @param {Int} scrollDuration
 * @param {Int} offset
 * @param {Int} scrollSmoothness
 */

const fancyAScroll = (
  elementID = 'main-content',
  scrollDuration = 500,
  offset = 0, // I  had to use 120 to compensate for a sticky header
  scrollSmoothness = 10
) => {
  const accuracyBuffer = 10
  try {

    // #1 Calculate the final offset position to scroll-to
    const element = document?.getElementById(elementID)
    const bodyRect = document?.body?.getBoundingClientRect().top
    const elementRect = element?.getBoundingClientRect().top
    const elementPosition = elementRect - bodyRect
    const offsetPosition = elementPosition - offset // final - target position to scroll

    // #2 calculate steps & direction (up or down)
    const scrollStepUnit = offsetPosition / (scrollDuration / scrollSmoothness)
    const scrollStepDirection = offsetPosition > window?.scrollY ? '' : '-'
    const scrollStepY = `${scrollStepDirection}${scrollStepUnit}`

    // #3 keep on relatively scrolling untill reached to the destination
    const scrollInterval = setInterval(() => {
      let targetRangeReached =
        offsetPosition - accuracyBuffer < window.scrollY &&
        window.scrollY < offsetPosition + accuracyBuffer

      targetRangeReached ? clearInterval(scrollInterval) : window.scrollBy(0, scrollStepY)
    }, scrollSmoothness)
  }
  catch (error) {
    console.error('Error @scrollTopWithDuration\n', error)
  }
}

export default fancyAScroll

Answer 8

I implemented a sophisticated scrolling function inspired by the insights shared by @SachinShah above to cater to my specific requirements.

This could be beneficial for someone else facing similar needs.

Before delving into its functionality, let me outline what it accomplishes:

It smoothly scrolls to a designated element's id
Follows a specified duration seamlessly
Offers an option to adjust the target offset, particularly useful when dealing with sticky/smart headers
Allows control over the smoothness of the scroll using setInterval function

Please bear in mind that:

The method utilizes the relative scrolling approach window.scrollBy, necessitating the determination of scrollDirection (up/down) within the logic
Both scrollDuration and scrollSmoothness are measured in milliseconds

/**
 * Scroll to the top of the page in a specified duration(ms) and smoothness(ms)
 * ref: https://stackoverflow.com/a/52478645/3556531
 * @param {String} elementID
 * @param {Int} scrollDuration
 * @param {Int} offset
 * @param {Int} scrollSmoothness
 */

const fancyAScroll = (
  elementID = 'main-content',
  scrollDuration = 500,
  offset = 0, // I  had to use 120 to compensate for a sticky header
  scrollSmoothness = 10
) => {
  const accuracyBuffer = 10
  try {

    // #1 Calculate the final offset position to scroll-to
    const element = document?.getElementById(elementID)
    const bodyRect = document?.body?.getBoundingClientRect().top
    const elementRect = element?.getBoundingClientRect().top
    const elementPosition = elementRect - bodyRect
    const offsetPosition = elementPosition - offset // final - target position to scroll

    // #2 calculate steps & direction (up or down)
    const scrollStepUnit = offsetPosition / (scrollDuration / scrollSmoothness)
    const scrollStepDirection = offsetPosition > window?.scrollY ? '' : '-'
    const scrollStepY = `${scrollStepDirection}${scrollStepUnit}`

    // #3 keep on relatively scrolling untill reached to the destination
    const scrollInterval = setInterval(() => {
      let targetRangeReached =
        offsetPosition - accuracyBuffer < window.scrollY &&
        window.scrollY < offsetPosition + accuracyBuffer

      targetRangeReached ? clearInterval(scrollInterval) : window.scrollBy(0, scrollStepY)
    }, scrollSmoothness)
  }
  catch (error) {
    console.error('Error @scrollTopWithDuration\n', error)
  }
}

export default fancyAScroll

How can you implement window.scrollTo animation in JavaScript without using jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Setting up language preferences without having to reload the entire page

Using Typescript to create a Checkbox Grid that displays pipe-delimited values and implements a custom validation rule

Using multiple words as input for an Alexa Skill

The use of refs on Function components in SVG is not supported. Any attempts to access the ref will result in an

There seems to be an issue with React-hook-form and material-ui not retaining value changes in the onBlur() method

Unable to locate the Shadcn error module: Error encountered when trying to resolve the path '@/components/ui/accordion' within the directory 'Desktop/sadcn/src'

Issue encountered when compiling Vue 3 with TypeScript and Webpack Encore: Vue Router's $route is missing

Modifying the content of a paragraph by incorporating information from various sources

Experiencing difficulties connecting with aspx while using Ext JS 4.2

Dynamic JavaScript Line Graph

The dynamic URL parameters are altered by the Browser's back button

There appears to be some lingering content in the JQuery Mobile slide-out dialog box

JavaScript XML Serialization: Transforming Data into Strings

Back to top button displayed exclusively on desktop view (not visible on mobile devices)

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Exploring the relationship between MongoDB and Node.js: Retrieving a document based on its _id using a UUID (GUID

Assistance needed with dynamically resizing a background image

Express API encounters an issue with multer and body-parser as req.file is undefined

When array.push is used inside another array, it results in an undefined value

Questioning the way spyOn "halts all execution of a function" is described in the Jasmine documentation (specifically in the section on Spies in version 2.2)