Arrow Scroll Top

Developer
Olivier C
Size
7,025 Kb
Views
16,192
  1. Arrow Scroll Top Previews
  2. Arrow Scroll Top HTML Codes
  3. Arrow Scroll Top CSS Codes
  4. Arrow Scroll Top JS Codes

How do I make an arrow scroll top?

What is a arrow scroll top? How do you make a arrow scroll top? This script and codes were developed by Olivier C on 19 November 2022, Saturday.

Arrow Scroll Top Previews
IQ Test

Arrow Scroll Top - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Arrow Scroll Top</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas. Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla. Duis tincidunt diam id ullamcorper ultrices. Ut mattis nibh vel leo vulputate viverra. In hac habitasse platea dictumst. Nam at maximus diam. Sed interdum nunc nec laoreet blandit. Praesent consequat nunc nulla, sed tempus dolor ornare eget. Donec rutrum eros ut purus sodales, ac facilisis massa porttitor. Mauris pulvinar sodales metus a consectetur. Fusce sem purus, gravida vel ultrices quis, blandit sed metus. Nunc elementum odio eu nibh pretium, tincidunt laoreet erat auctor. Proin hendrerit vestibulum erat eu laoreet. Nullam id vestibulum urna. Etiam semper vehicula nibh, id fringilla velit vestibulum eu.</p> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat. Curabitur vehicula bibendum nibh, eu fringilla arcu ullamcorper et. Morbi massa ex, viverra eu risus id, ultricies luctus dolor. Ut ut laoreet purus. Donec maximus, ligula quis consequat scelerisque, sapien risus sollicitudin erat, id malesuada sapien quam a odio. Mauris nec nisi molestie, ultricies erat cursus, euismod arcu. Donec eget lobortis eros. Donec eu condimentum est.</p> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor. Nunc vel nulla diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tristique erat ut consequat semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus finibus quis sem quis elementum. Curabitur et ipsum vel ex viverra scelerisque. Phasellus imperdiet leo urna, vitae luctus nisl porta id.</p> <p>Pellentesque at sodales magna. In hac habitasse platea dictumst. Vestibulum aliquet feugiat quam ac maximus. Nam ligula neque, tincidunt eu mauris at, maximus rhoncus elit. Vestibulum porta euismod dignissim. Maecenas id libero rutrum, sollicitudin ipsum in, scelerisque eros. Cras eget massa nec magna vestibulum posuere non eget sapien. Etiam porttitor, ex at aliquam pulvinar, metus elit maximus tellus, vitae elementum risus nunc non nulla. Morbi bibendum, dui in viverra tempor, tellus sapien sodales risus, non aliquet dui mauris eu metus. Aenean posuere lectus dolor, in vehicula erat commodo ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus bibendum convallis velit et accumsan.</p> <p>Nunc lacinia libero eu rhoncus ultricies. Nulla condimentum nunc eget metus imperdiet convallis. Cras et efficitur ex, sed dictum nisl. Pellentesque mattis enim in metus tincidunt suscipit. Integer pharetra feugiat auctor. Phasellus id massa ut diam lacinia condimentum sit amet at sem. Vestibulum molestie est sed elementum tincidunt. Curabitur id magna enim. Phasellus aliquam sapien in leo vulputate, ut gravida diam fermentum.</p> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus. Fusce sagittis nisl vitae volutpat fringilla. Donec elementum nisi eget augue egestas pharetra. Etiam sit amet pharetra felis. Ut eu velit nec massa vehicula tincidunt sit amet vel lectus. Curabitur tempus erat id diam venenatis, at convallis dolor convallis. Vivamus at sagittis dui. Vivamus eu volutpat quam. Mauris nec fermentum velit. Mauris non leo quam. Sed ac ex id erat efficitur rutrum eget ut metus. Nulla non maximus nibh. Morbi a libero dictum, tempus lectus sit amet, luctus magna. Aliquam rutrum nunc eros, sed dignissim libero iaculis sit amet.</p> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam. Praesent non velit lectus. Proin vehicula ut metus non tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> <p>Nulla porta velit vitae tincidunt semper. Suspendisse ex metus, faucibus a lectus at, commodo viverra massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus nisl erat, pulvinar ac mauris in, vestibulum volutpat ipsum. Quisque in interdum tortor. Quisque ornare id massa a placerat. Nam orci lorem, pharetra a lacus feugiat, lacinia porta sem. Pellentesque viverra fringilla tincidunt. Etiam condimentum elementum metus, et lacinia justo condimentum non.</p> <p>Aliquam eget lorem interdum, tempus nulla eget, condimentum dolor. Etiam tellus felis, commodo vitae ligula at, finibus tempor sapien. Cras nec lorem tempus, molestie odio sit amet, semper lectus. Suspendisse id fermentum ligula. Curabitur nec cursus dui. Aliquam facilisis mattis risus ac elementum. Fusce mollis urna sed quam porta, nec vestibulum libero ornare. Proin massa urna, tempus at consequat et, iaculis elementum urna. Donec sagittis quam eu velit sollicitudin dictum. Nunc interdum egestas molestie. Aenean erat arcu, dictum quis condimentum bibendum, tincidunt vitae justo. Mauris eget massa dignissim, sodales risus id, dignissim tellus. Donec blandit enim a tincidunt ullamcorper. Mauris tortor quam, convallis eu lorem non, porta varius tortor.</p> <p>Praesent pellentesque elit non dui finibus, malesuada tincidunt lorem laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget rhoncus justo, non consequat justo. Integer consequat sit amet mauris sed lacinia. In lobortis tincidunt odio at finibus. In in mauris ut neque aliquet efficitur sit amet eu metus. Phasellus id tortor a lorem ultricies finibus vel nec mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a libero eu neque pellentesque faucibus nec non felis. Nam fringilla sagittis tortor, at convallis ligula. In eu lectus ac tellus cursus fringilla eget et ex. Nunc sed bibendum erat. Etiam rutrum ante ut nibh tempus, sed vehicula dolor egestas. Morbi viverra dictum placerat. Morbi mattis justo nec neque vestibulum gravida.</p>
</main>
<footer class="footer"> <p>Un contenu dans le footer...</p>
</footer> <script src="js/index.js"></script>
</body>
</html>

Arrow Scroll Top - Script Codes CSS Codes

.scroll-top { position: fixed; bottom: 0; right: 0; z-index: 4000; height: 3rem; width: 3rem;
}
.scroll-top svg { height: 2rem; width: 2rem; fill: #000; opacity: 0.5;
}
body { margin: 0 1rem; font-family: Arial; color: IndianRed; background-color: #333;
}
body > * { max-width: 30rem; margin: 0 auto;
}

Arrow Scroll Top - Script Codes JS Codes

// @link http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values
function arrowScrollTop() {	var id = document.getElementsByClassName( 'footer' )[0];	id.insertAdjacentHTML( 'beforeend', '<a href="#" class="scroll-top"><svg xmlns="http://www.w3.org/2000/svg"><path d="M20 32v-16l6 6 6-6-16-16-16 16 6 6 6-6v16z"/></svg></a>' );	var el = document.getElementsByClassName( 'scroll-top' )[0]; var es = el.style;	es.transition = 'opacity 2s ease-in-out';	es.display = 'none';	es.opacity = 0; window.onscroll = function() { console.log( window.scrollY ); var scrollTop = document.body.scrollTop;	if ( scrollTop > 100 ) {	es.display = 'block'; if( es.display != 'none' ) { es.opacity = 1; es.transition = 'opacity 2s ease-in-out'; }	} else {	es.opacity = 0; el.addEventListener( 'transitionend', function( event ) { es.display = 'none'; }, false );	}	};	el.onclick = function( e ) { for ( var y = window.scrollY ; y >= 0 ; y - 30 ){ scrollToTop( y ); } function scrollToTop( y ) { //setTimeout( function() { window.scrollTo( 0, y ) }, 100 ); }	e.preventDefault();	};
}
arrowScrollTop();
Arrow Scroll Top - Script Codes
Arrow Scroll Top - Script Codes
Home Page Home
Developer Olivier C
Username olivier-c
Uploaded November 19, 2022
Rating 3
Size 7,025 Kb
Views 16,192
Do you need developer help for Arrow Scroll Top?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Olivier C (olivier-c) Script Codes
Name
Picture tag, srcset and sizes attributes
Calendar
Space Invaders
Number Lists
Parallelogram with background-image
Backgrounds...
Mosaic
Vertical Organizational Chart
Signature
A Pen by Olivier C
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!