{"id":5099,"date":"2017-12-27T01:00:00","date_gmt":"2017-12-27T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/how-create-jquery-scrolltop-animation-without-jquery\/"},"modified":"2024-07-25T14:23:42","modified_gmt":"2024-07-25T12:23:42","slug":"how-create-jquery-scrolltop-animation-without-jquery","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/how-create-jquery-scrolltop-animation-without-jquery\/","title":{"rendered":"Create jQuery scrollTop animation without jQuery"},"content":{"rendered":"\n

Have you ever tried to replicate the smooth scroll animation of jQuery scrollTop<\/strong> but without jQuery<\/strong>? With plain \/ vanilla Javascript?<\/p>\n

I did, and let me tell you it is not something you find on the "You don’t need jQuery" webpages.
\nAnd it even gets more complicated when you want to apply a specific jQuery easing effect, fire a callback on finish, being able to stop the animation at any moment etc.<\/p>\n

You could go and make use of a smooth scrolling library like this<\/a> but it is 5Kb with polyfills and minified and it does a lot more than scrolling. It deals with link anchors and the text within them and it has quite a lot of logic dedicated at that. Something perhaps unnecessary if you just want to scroll smootly.<\/p>\n

Lightweight Javascript effect<\/h2>\n

If you want something much smaller to use within your code, here’s hat I’ve used for my fullPage.js library<\/a>.<\/p>\n

It is only 0.4Kb minified and pretty straight forward.<\/p>\n

I’ve made it available at Github just before writing this article so you can have access to it all as well as the minified files.<\/p>\n

\n
See Demo<\/a><\/div>\n
View on GitHub<\/a><\/div>\n<\/div>\n
\/*!\n * skrollTop 0.0.1\n * https:\/\/github.com\/alvarotrigo\/skrollTop.js\n * @license MIT\n *\n * Copyright (C) 2018 alvarotrigo.com - A project by Alvaro Trigo\n *\/<\/span>\n(function<\/span> (root, factory<\/span>) <\/span>{\n  if<\/span> ( typeof<\/span> define === 'function'<\/span> && define.amd ) {\n    define([], (function<\/span> (<\/span>) <\/span>{\n      return<\/span> factory(root, root.document);\n    }));\n  } else<\/span> if<\/span> ( typeof<\/span> exports === 'object'<\/span> ) {\n    module<\/span>.exports = factory(root, root.document);\n  } else<\/span> {\n    root.skrollTop = factory(root, root.document);\n  }\n})(typeof<\/span> global !== 'undefined'<\/span> ? global : typeof<\/span> window<\/span> !== 'undefined'<\/span> ? window<\/span> : this<\/span>, (function<\/span> (window, document<\/span>) <\/span>{\n    'use strict'<\/span>;\n\n    var<\/span> g_activeAnimation;\n    var<\/span> self = {};\n\n    \/\/easeInOutCubic animation included in the library<\/span>\n    Math<\/span>.easeInOutCubic = function<\/span> (t, b, c, d<\/span>) <\/span>{\n        if<\/span> ((t\/=d\/2<\/span>) < 1<\/span>) return<\/span> c\/2<\/span>*t*t*t + b;return<\/span> c\/2<\/span>*((t-=2<\/span>)*t*t + 2<\/span>) + b;\n    };\n\n    self.stop = function<\/span>(<\/span>)<\/span>{\n        g_activeAnimation = false<\/span>;\n    };\n\n    \/**\n    * Simulates the animated scrollTop of jQuery. Used when css3:false or scrollBar:true or autoScrolling:false\n    * http:\/\/stackoverflow.com\/a\/16136789\/1081396\n    *\/<\/span>\n   self.scrollTo = function<\/span>(params<\/span>) <\/span>{\n       var<\/span> element = typeof<\/span> params.element !== 'undefined'<\/span> ? params.element : window<\/span>;\n       var<\/span> to = params.to;\n       var<\/span> duration = typeof<\/span> params.duration !== 'undefined'<\/span> ? params.duration : 700<\/span>;\n       var<\/span> callback = typeof<\/span> params.callback !== 'undefined'<\/span> ? params.callback : null<\/span>;\n       var<\/span> easing = typeof<\/span> params.easing !== 'undefined'<\/span> ? params.easing : Math<\/span>.easeInOutCubic;\n\n       var<\/span> start = (window<\/span>.pageYOffset || document<\/span>.documentElement.scrollTop)  - (document<\/span>.documentElement.clientTop || 0<\/span>);\n       var<\/span> change = to - start;\n       var<\/span> currentTime = 0<\/span>;\n       var<\/span> increment = 16<\/span>; \/\/same amount of milliseconds as requestAnimationFrame<\/span>\n       g_activeAnimation = true<\/span>;\n\n       var<\/span> animateScroll = function<\/span>(<\/span>) <\/span>{\n            \/\/in case we want to stop it from other function whenever we want<\/span>\n           if<\/span> (g_activeAnimation) {\n               currentTime += increment;\n               element.scrollTo(0<\/span>, easing(currentTime, start, change, duration));\n\n               if<\/span> (currentTime < duration) {\n                   setTimeout(animateScroll, increment);\n               } else<\/span> if<\/span> (callback){\n                   callback();\n               }\n           }else<\/span> if<\/span> (currentTime < duration && callback){\n               callback();\n           }\n       };\n\n       animateScroll();\n   };\n\n   return<\/span> self;\n}));\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In order to use it just call skrollTop.scrollTo<\/code> like this:<\/p>\n
document<\/span>.getElementById('scrollMe'<\/span>).addEventListener('click'<\/span>, function<\/span>(<\/span>)<\/span>{\n    skrollTop.scrollTo({\n        to<\/span>: 800<\/span>,\n        duration<\/span>: 4000<\/span>,\n        callback<\/span>: function<\/span>(<\/span>) <\/span>{\n           console<\/span>.log(\"va\"<\/span>);\n        }\n    });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
How to add jQuery easing effects<\/h2>\n
\"jQuery<\/figure>\n
jQuery provides a small set of animation effects they call Easings Functions<\/strong><\/a>.
\nIf you want to have access to more effects, then you would have to go for jQuery UI<\/p>\n
The library includes the easeInOutCubic<\/strong> effect, but you can add any others provided by jQuery by using the vendor file easings.min.js<\/code><\/a> (only 12Kb) that I also provide in fullPage.js<\/a>. Then just passs the name of the effect as an option to the library to specify which easing you want to use:<\/p>\n
<!-- Optional ! --><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"..\/easings.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<!-- end of optional --><\/span>\n\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"..\/skrollTop.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    skrollTop.scrollTo({\n        to<\/span>: 800<\/span>,\n        easing<\/span>: window<\/span>.easings.easeOutBounce, \/\/ <-- here!<\/span>\n        duration<\/span>: 600<\/span>,\n        callback<\/span>: function<\/span>(<\/span>) <\/span>{\n           console<\/span>.log(\"finished!\"<\/span>);\n        }\n    });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"
Have you ever tried to replicate the smooth scroll animation of jQuery scrollTop but without jQuery? With plain \/ vanilla Javascript?<\/p>\n","protected":false},"author":1,"featured_media":5098,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[107],"tags":[40,18],"class_list":["post-5099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-front-end","tag-jquery"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5099"}],"version-history":[{"count":4,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5099\/revisions"}],"predecessor-version":[{"id":15496,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5099\/revisions\/15496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5098"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}