CyberX

How to make simple scroll top jumper via RevolveR

So. This is a small tutorial how to create simple animated scroll to top button via RevolveR frontend library. Example you can see on this site when you scroll window. When scroll position takes 40% of Y axis the jumper are shown with animation.

Code below creates this scroll to top JavaScript animated button:


// charging weapons with namespace
const revolver = new Revolver('$');

$.dom('.jumper', 'del');

// jumper
$.dom('div',"new|after|body", {
	html: '<i  style="display: block;position: relative;top: 20px;color: #fff; font-size: 25px; text-shadow: -1px -1px 2px #000">^</i>', 
	attr: { 
		style: "width:60px; height:60px; text-align:center; display:block; position: fixed;bottom: 30px;right: 30px;background: rgba(0,0,0,.5);",
	class: "jumper"
		} 
	}
);

	$.event('.jumper', 'click', function(e) {

		e.preventDefault();

		$.scroll();

	});

	window.addEventListener('scroll', function(e) {

		if( $.curOffset[1] <= $.sizes[1] * 0.4 ) {

			$.dom('.jumper', 'animate', ['opacity:0:500'], function(e) {
				$.dom('.jumper i', 'animate', ['top:-50px:300:pulse'], function(e) {
					$.dom(".jumper", "style", ['display:none']);
				});
			});


		} 
		else {

			$.dom(".jumper", "style", ['display:block']);
			$.dom('.jumper', 'animate', ['opacity:.9:500'], function(e) {
				$.dom('.jumper i', 'animate', ['top:20px:300:pulse'], function(e) {});
			});
			
		}

	});

Comments …

You can write here as guest with moderation. Please confirm your person if you have an account or register.

Add a comment as guest
Captcha: