beauterre/smoothscroll

smoothScroll in vanilla JS ES5 ( (ES6 provided for transpilers)

smoothScroll-Es5.js

smoothScroll in vanilla JS (ES5)

• WITHOUT JQUERY!
• Made especially for Students of the MediaCollege Amsterdam by Hjalmar Snoep
• LICENSE: Use anywhere, credit, don't credit, I really don't care

How to use..

• Include smoothScroll-Es5.js in a script tag in your header.

 <script src="smoothScroll-ES5.js"></script>

• add an id to the element you'd like to scroll to

 <section id="idtoScrollTo"></section>

• Use a regular link to href any id on your page (or any other element, but links are best for backwards compatibility).
• add class scrollOnClick to this link.
• add a href AND a scrollTo containing the id to scroll to.

 <a href="#idtoScrollTo" scrollTo="idtoScrollTo" class="scrollOnClick">go scroll</a>

• optionally add a duration in ms
• optionally add easing 'linear' or 'smooth'

 <a href="#idtoScrollTo" duration="5000" easing="smooth" scrollTo="idtoScrollTo" class="scrollOnClick">Test</a>

The library is easy to include in your projects and WAY (like 30x) smaller than even slim-build-compressed jQuery. Test the demo.html to see linear, smooth and default (smooth, 500ms) scrolls.

I didn't think it all up myself.. Pawel Grzybek deserves most of the credit (and gets it, see the tutorial). This Tutorial is in ES6 and was the basis for the ES6 script. Since Es6 has compatibility issues with older browsers, I translated this script to ES5 and made a easy to use, small library (<3Kb). I left the ES6 script in, for you to look at, if you want the extended features, that I deemed too much. Also for people using a transpiler in their development stack, it might be even MORE useful.

• NOTE: I uncovered a little bug in Chrome's implementation of Es6, where the default-behaviour of jumping to document-fragments cannot be prevented, it does work in Es5, but if you use Es6, stick to divs, buttons and anything other than

<a href='#id'>jump to id</a>

universall usefullness as long as browserwars continue around smooth scrolling

• This can be used as long as the scrollIntoView function is still in working Draft and doesn't support 'smooth' as an option in most browsers. OR
• as Pasel Grzybek pointed out: body { scroll-behavior: smooth; } becomes a standard supported by more browsers than just firefox OR
• behavior 'smooth' becomes a part of the scrollTo functionality.. OR..

Backward compatibility & Browser support

Another great reason to use this, is backward and cross-browser compatibility without jQuery. Haven't tested it fully yet, but from what I used in the code I reckon it will run cross-browser all the way down to 2011. IE9, Edge12, FF3, Chrome4, Safari3.1, Opera 10.1.. If anyone tests this and finds otherwise, please let me know. Mobile browser suppport is great. All these browsers are newer..

Elegant Fallback

If you use the Es5 version with links, even if the code breaks on some ancient browser, or someone has javascript disabled, it'll still work without the scrolling.. I can't find it anywhere, but I remember the jumping to document-fragments with # being part of html1.2 where I got on the HTML train, yes I'm that old. :) Patreon me to get me into a nice home..

HardCore Backward compatibility

If you want support for IE9 and down, you might change the getElementsByClassname to a getElementsByTag("scroll"), which is supported from IE6+, Firefox 2+, Chrome 1+ and up as it is a DOM Core level 2 property. And then you should use the made up tagname like: Go to Test.. You can just style it with CSS to look like a link, if you want.. I just found that a bit... you know nerdy, even for me.. And since I have no more clients left, who insist on anything beyong IE9, I just left it for now. But I thought I'd mention it, for people who aren't convinced yet this script can do WITHOUT jQuery.

smoothscroll's Issues

scrollTo not official html..

attribute scrollTo is not validatable in some HTML5 validators..
Officially HTML5 tags can have any attribute you wish. However, some validators disagree.
A possible solution: change scrollTo to data.
The data attribute is always allowable.

Only problem I can think of is that the data attribute might allready be in use.. So... thinking about it.

Devmaps

Chrome geeft de warnings:
"DevTools failed to parse SourceMap: https://samencorona.nl/wp-content/cache/busting/1/wp-content/themes/charitious/assets/js/bootstrap.min.js.map"

"DevTools failed to parse SourceMap: https://samencorona.nl/wp-content/cache/busting/1/wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js.map"

"DevTools failed to parse SourceMap: https://samencorona.nl/wp-content/cache/busting/1/wp-content/themes/charitious/assets/js/popper.min.js.map"

Via stack overflow:

Source code of CSS/JS are usually minified/compressed.
If we want to debug those minified files then we have to add following line at the end of minified file

/*# sourceMappingURL=bootstrap.min.css.map */
This tells compiler where is source file actually mapped.

In the case of JS its make sense
but in the case of CSS, its actually debugging of SCSS.

To Remove Warning: remove /*# sourceMappingURL=bootstrap.min.css.map */ from the end of minified file, .

Voor de andere js files is er waarschijnlijk iets dergelijks te doen. Waarschijnlijk te vinden bij de documentatie..?

no scrolling after function

Chrome Version 61.0.3163.100 (Official Build) (64-bit)
after function no scroll

testing

This library has been tested on IE 11, Chrome61, Edge40, Firefox55 and Opera47 on windows 10.
Works as expected.
If anyone wants to test Safari, I'd be much obliged.

SmoothScroll transition issue

Ik heb de javascript file erin gezet, alleen elke keer als ik van bijvoorbeeld de 2de naar de 1ste of van de 3de naar de 4de item in de list gaat doet hij het niet goed. Hij gaat heel kort naar het punt waar hij moet zijn alleen als hij is aangekomen gaat hij direct weer terug naar het punt waar je daarvoor vandaan kwam. Dit is met google Chrome.

Ik had de code veranderd naar hieronder ( alleen de duration veranderd )

Hij doet het wel als ik hem online zet maar niet op mijn localhost

http://24011.hosts.ma-cloud.nl/school/portfolio/