the following example:
create a ScrollToTop button in vanilla - old school style
"use strict";
document.addEventListener( 'DOMContentLoaded', function () {
const scrollButton = document
.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
scrollButton.setAttributeNS( 'http://www.w3.org/2000/xmlns/',
'xmlns:xlink', 'http://www.w3.org/1999/xlink' );
scrollButton.setAttribute( 'viewBox', "0 0 100 100" );
scrollButton.style.width ='50px'
scrollButton.style.position = 'fixed'
scrollButton.style.right = '10px'
scrollButton.style.bottom = '10px'
scrollButton.style.zIndex = '1000'
scrollButton.style.opacity = '0.5'
scrollButton.style.cursor = 'pointer'
scrollButton.style.transition = 'all ease 400ms'
scrollButton.style.display = 'none'
const myCircle = document
.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
myCircle.setAttribute( 'cx', '50' );
myCircle.setAttribute( 'cy', '50' );
myCircle.setAttribute( 'r', '50' );
myCircle.setAttribute( 'fill', 'red' );
scrollButton.appendChild( myCircle );
const myArrow = document
.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
myArrow.setAttribute( 'd', 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' );
myArrow.setAttribute( 'stroke', 'white' );
myArrow.setAttribute( 'stroke-width', '15' );
myArrow.setAttribute( 'stroke-linecap', 'round' );
scrollButton.appendChild( myArrow );
scrollButton.addEventListener( 'mouseover',
() => scrollButton.style.opacity = '1'
);
scrollButton.addEventListener( 'mouseout',
() => scrollButton.style.opacity = '.3'
);
scrollButton.addEventListener( 'click', () => document
.querySelector( 'body' )
.scrollIntoView( { behavior: 'smooth' } )
);
document.body.appendChild( scrollButton );
window.onscroll = () =>
scrollButton.style.display =
( document.querySelector( 'html' ).scrollTop /
( document.querySelector( 'html' ).scrollHeight -
document.querySelector( 'html' ).clientHeight ) ) > 0.25
? '' : 'none';
})
now the same solution using a selector engine.
In this example I used my own engine, it doesn't matter for the comparison.
<script type="text/javascript" src="https://w-web.de/myquery/myquery-min.js"></script>
or
<script type="text/javascript" src="https://w-web.de/myquery/myquery.js"></script>
"use strict";
$().ready( () => {
let scrollButton =
$().sCreate( '0 0 100 100' )
.styles()
.width( '50px' ).position( 'fixed' )
.right( '10px' ).bottom( '10px' )
.zIndex( '1000' ).opacity( '0.3' )
.cursor( 'pointer' ).transition( 'all ease 400ms' )
.display( 'none' ).parent()
.sAppend(
$().sCircle( 50, 50, 50 ).fill( 'red' ) )
.sAppend(
$().sPath( 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' )
.shortStroke( 'white' , '15', 'round' ) )
.on( 'mouseover', function (){ this.style.opacity = '1' } )
.on( 'mouseout', function (){ this.style.opacity = '.3' } )
.click( () => $( 'body' ).n.scrollIntoView( { behavior: 'smooth' } ) )
.appendEnd( $( 'body' ) )
$(window).on('scroll', () =>
scrollButton.n.style.display =
( $('html').n.scrollTop /
( $('html').n.scrollHeight -
$('html').n.clientHeight ) ) > 0.25
? '' : 'none'
)
})
Advantages of a SelectorEngine
- shorter code
- Chaining
Disadvantages
- greater learning effort
I think that if you have to deal with a lot of changing employees in a team, the vanilla JS solution certainly makes more sense.
If you are a lone fighter, you should use a Selector Engine.
what is your opinion?