Scrolltop animate in javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Animate scrollTop and scrollLeft

License

joelmukuthu/animated-scroll

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Allows animating scrollTop and/or scrollLeft of an HTML element. Uses requestAnimationFrame to provide smooth animations and returns a Promise to notify when the animation is completed.

bower install animated-scroll

npm install animated-scroll

The pre-built files can be found in the dist/ directory. dist/AnimatedScroll.min.js is minified and production-ready. It has a UMD wrapper so you can access it as:

var AnimatedScroll = require('animated-scroll'); // or import AnimatedScroll from 'animated-scroll'; // or define([ 'path/to/animated-scroll' ], function (AnimatedScroll) >); // or var AnimatedScroll = window.AnimatedScroll;

var element = document.getElementById('myElement'); var scroll = new AnimatedScroll(element); scroll.top(100).then(function (newTop)  // newTop === 100 console.log('#myElement\'s scrollTop is now', newTop); >); scroll.left(100).then(function (newLeft)  // newLeft === 100 console.log('#myElement\'s scrollLeft is now', newLeft); >); scroll.to( left: 100, top: 100 >).then(function (coords)  console.log('#myElement\'s scrollTop is now', coords.top); console.log('#myElement\'s scrollLeft is now', coords.left); >);

AnimatedScroll.prototype.top(top [, duration [, easing]]) : Promise

Animates the scrollTop of element from it’s current scrollTop to the new scrollTop in a time-frame of duration and using the provided easing function ( duration and easing are optional).

It returns a promise which is resolved with the value of the new scrollTop when the animation is complete.

duration is in milliseconds and defaults to 400 if not provided. If set to 0 or false , then the scrollTop is set without animating. In this case an already fulfilled promise is returned.

If no easing is provided and duration is provided then the default easing function used is easeInOutQuad .

Calling .top on an element while a scrollTop animation is currently ongoing will stop that animation and start a new one i.e. animations are not queued. You can queue animations by hooking into the .then of the returned promise.

AnimatedScroll.prototype.left(top [, duration [, easing]]) : Promise

Exactly the same as .top but for scrollLeft 🙂

AnimatedScroll.prototype.to( < top, left >[, duration [, easing]]) : Promise

Convinient way to animate both scrollTop and scrollLeft . Accepts an object with top and left properties and returns a promise which resolves with an object containing the new top and left values.

Stops any currently-running animation of scrollTop .

Stops any currently-running animation of scrollLeft .

Stops any currently-running animation of scrollLeft or scrollTop .

Contributions are welcomed! Here are the contribution guidelines.

First clone the repository and install dependencies:

To make a production build:

Источник

Scroll to top in JavaScript with animation

In this article, you will learn how to create a «scroll to top» button with animation using pure Javascript without Jquery.

We will use the scrollTop() method to go to a specified location of the current page.

scrollTop() method takes two parameters scrollTop(x,y) .

If we pass both parameters as 0 , the page will reach to the left and top of the page.

1. In the above example, I have created a element and set its position to fixed. So that when we scroll the page, the button stays in one place. Even, the myFunction() is executed when the button is clicked.
2. Inside the myFunction(), we have called the scrollTop() method and passed both parameters as 0.

function myFunction() window.scrollTo(0, 0); >

html scroll-behavior:smooth; >

In the above example, we have explained how to create scroll to top button using javascript with animation. Click on the button to open the code in editor.

html> style> html scroll-behavior:smooth; > .my-btn pa-dding:6px 12px; background:#0000ff; color:#fff; border-radius:6px; position: fixed; bottom: 10px; right:10px; > /style> body style="height:1500px;background:#eee"> h1>The example of scrollTop() method./h1> button class="my-btn" onclick="myFunction()">Top/button> script> function myFunction() window.scrollTo(0, 0); > /script> /body> /html>

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Animate scrollTop and scrollLeft

License

joelmukuthu/animated-scroll

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Allows animating scrollTop and/or scrollLeft of an HTML element. Uses requestAnimationFrame to provide smooth animations and returns a Promise to notify when the animation is completed.

bower install animated-scroll

npm install animated-scroll

The pre-built files can be found in the dist/ directory. dist/AnimatedScroll.min.js is minified and production-ready. It has a UMD wrapper so you can access it as:

var AnimatedScroll = require('animated-scroll'); // or import AnimatedScroll from 'animated-scroll'; // or define([ 'path/to/animated-scroll' ], function (AnimatedScroll) >); // or var AnimatedScroll = window.AnimatedScroll;

var element = document.getElementById('myElement'); var scroll = new AnimatedScroll(element); scroll.top(100).then(function (newTop)  // newTop === 100 console.log('#myElement\'s scrollTop is now', newTop); >); scroll.left(100).then(function (newLeft)  // newLeft === 100 console.log('#myElement\'s scrollLeft is now', newLeft); >); scroll.to( left: 100, top: 100 >).then(function (coords)  console.log('#myElement\'s scrollTop is now', coords.top); console.log('#myElement\'s scrollLeft is now', coords.left); >);

AnimatedScroll.prototype.top(top [, duration [, easing]]) : Promise

Animates the scrollTop of element from it’s current scrollTop to the new scrollTop in a time-frame of duration and using the provided easing function ( duration and easing are optional).

It returns a promise which is resolved with the value of the new scrollTop when the animation is complete.

duration is in milliseconds and defaults to 400 if not provided. If set to 0 or false , then the scrollTop is set without animating. In this case an already fulfilled promise is returned.

If no easing is provided and duration is provided then the default easing function used is easeInOutQuad .

Calling .top on an element while a scrollTop animation is currently ongoing will stop that animation and start a new one i.e. animations are not queued. You can queue animations by hooking into the .then of the returned promise.

AnimatedScroll.prototype.left(top [, duration [, easing]]) : Promise

Exactly the same as .top but for scrollLeft 🙂

AnimatedScroll.prototype.to( < top, left >[, duration [, easing]]) : Promise

Convinient way to animate both scrollTop and scrollLeft . Accepts an object with top and left properties and returns a promise which resolves with an object containing the new top and left values.

Stops any currently-running animation of scrollTop .

Stops any currently-running animation of scrollLeft .

Stops any currently-running animation of scrollLeft or scrollTop .

Contributions are welcomed! Here are the contribution guidelines.

First clone the repository and install dependencies:

To make a production build:

Источник

Scroll to top in JavaScript with animation

In this article, you will learn how to create a «scroll to top» button with animation using pure Javascript without Jquery.

We will use the scrollTop() method to go to a specified location of the current page.

scrollTop() method takes two parameters scrollTop(x,y) .

If we pass both parameters as 0 , the page will reach to the left and top of the page.

1. In the above example, I have created a element and set its position to fixed. So that when we scroll the page, the button stays in one place. Even, the myFunction() is executed when the button is clicked.
2. Inside the myFunction(), we have called the scrollTop() method and passed both parameters as 0.

function myFunction() window.scrollTo(0, 0); >

html scroll-behavior:smooth; >

In the above example, we have explained how to create scroll to top button using javascript with animation. Click on the button to open the code in editor.

html> style> html scroll-behavior:smooth; > .my-btn pa-dding:6px 12px; background:#0000ff; color:#fff; border-radius:6px; position: fixed; bottom: 10px; right:10px; > /style> body style="height:1500px;background:#eee"> h1>The example of scrollTop() method./h1> button class="my-btn" onclick="myFunction()">Top/button> script> function myFunction() window.scrollTo(0, 0); > /script> /body> /html>

Источник