CODEWITHSUNDEEP
javascript
user9645391
user9645391

Reputation:

How to animate window.scrollTo with Javascript NOT jQuery?

I have searched and although writers has written in JavaScript people answer for jQuery. Anyway, How can I animate window.scrollTo with JavaScript? I used setInterval but not worked. Any help will be appreciated.

Upvotes: 28

Views: 35443

Answers (4)

KeshavDulal
KeshavDulal

Reputation: 4164

I wrote a very fancy scroll using @SachinShah's answer above for my custom needs.

Might come in handy to someone.

But first let me tell you what it does. It

  • scrolls to a specified element's id
  • follows a specified duration
  • can offset the target. Comes in handy when working with sticky/smart headers
  • control smoothness of scroll/setInterval function

Keep in mind that

  • Relative scrolling method window.scrollBy is used, hence scrollDirection (up/down) needs to be determined in the logic
  • scrollDuration and scrollSmoothness are 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

Upvotes: 0

user9645391
user9645391

Reputation:

I found it, By passing this object, Scroll smoothly :

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

Note : smooth is not supported in Safari.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

Upvotes: 74

Juan Lozoya
Juan Lozoya

Reputation: 209

This way worked for me:

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

Upvotes: 0

Sachin Shah
Sachin Shah

Reputation: 4533

try this one. 

window.scrollTo(0, 0);

I have used this to scroll from bottom to top. And it works for me using javascript.

Another way :

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);
}

Upvotes: 8

Related Questions