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?
Top comments (1)
There are many ways to Rome, of course I know that this can also be solved in other ways.
As you may have overlooked, the code was designed as a plugin. That's why the ready, scope!!
It's not about a CodeGolf competition.
In my opinion, your code is unnecessarily complicated, why use template?
Why the strange way via the hidden attribute, which is ultimately misused as a class?
Why assign the circle attribute in the CSS?
All of this means that the code shown does not work on IOS devices, for example!!
sample code, if you don't design it as a plugin:
css
Javascript: