Scroll to top button

Developer
Dominic Francois
Size
3,743 Kb
Views
20,240
  1. Scroll to top button Previews
  2. Scroll to top button HTML Codes
  3. Scroll to top button CSS Codes
  4. Scroll to top button JS Codes

How do I make an scroll to top button?

Scroll down the page and a button will appear. Click the button and it will bring you back to the top of the page with a smooth Jquery animation. What is a scroll to top button? How do you make a scroll to top button? This script and codes were developed by Dominic Francois on 10 October 2022, Monday.

Scroll to top button Previews
IQ Test

Scroll to top button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll to top button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Shakespeare Monologues</h1>
<p class="text">It is not the fashion to see the lady the epilogue; but it is no more unhandsome than to see the lord the prologue. If it be true that good wine needs no bush, 'tis true that a good play needs no epilogue; yet to good wine they do use good bushes, and good plays prove the better by the help of good epilogues. What a case am I in then, that am neither a good epilogue, nor cannot insinuate with you in the behalf of a good play! I am not furnished like a beggar, therefore to beg will not become me: my way is, to conjure you; and I'll begin with the women. I charge you, O women! for the love you bear to men, to like as much of this play as please you: and I charge you, O men! for the love you bear to women,'as I perceive by your simpering none of you hate them,'that between you and the women, the play may please. If I were a woman I would kiss as many of you as had beards that pleased me, complexions that liked me, and breaths that I defied not; and, I am sure, as many as have good beards, or good faces, or sweet breaths, will, for my kind offer, when I make curtsy, bid me farewell.	<br><br>	Think not I love him, though I ask for him.
'Tis but a peevish boy; yet he talks well;
But what care I for words? yet words do well,
When he that speaks them pleases those that hear.
It is a pretty youth: not very pretty:
But, sure, he's proud; and yet his pride becomes him:
He'll make a proper man: the best thing in him
Is his complexion; and faster than his tongue
Did make offence his eye did heal it up.
He is not very tall; yet for his years he's tall:
His leg is but so so; and yet 'tis well:
There was a pretty redness in his lip,
A little riper and more lusty red
Than that mix'd in his cheek; 'twas just the difference
Betwixt the constant red and mingled damask.
There be some women, Silvius, had they mark'd him
In parcels as I did, would have gone near
To fall in love with him; but, for my part,
I love him not nor hate him not; and yet
Have more cause to hate him than to love him:
For what had he to do to chide at me?
He said mine eyes were black and my hair black;
And, now I am remember'd, scorn'd at me.
I marvel why I answer'd not again:
But that's all one; omittance is no quittance.
I'll write to him a very taunting letter,
And thou shalt bear it: wilt thou, Silvius?	<br><br>	Ay, springes to catch woodcocks! I do know,
When the blood burns, how prodigal the soul
Lends the tongue vows. These blazes, daughter,
Giving more light than heat, extinct in both
Even in their promise, as it is a-making,
You must not take for fire. From this time
Be something scanter of your maiden presence.
Set your entreatments at a higher rate
Than a command to parley. For Lord Hamlet,
Believe so much in him, that he is young,
And with a larger tether may he walk
Than may be given you. In few, Ophelia,
Do not believe his vows; for they are brokers,
Not of that dye which their investments show,
But mere implorators of unholy suits,
Breathing like sanctified and pious bawds,
The better to beguile. This is for all:
I would not, in plain terms, from this time forth
Have you so slander any moment leisure
As to give words or talk with the Lord Hamlet.
Look to't, I charge you. Come your ways.
</p>
</div>
<a href="#" class="go-top">To Top</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scroll to top button - Script Codes CSS Codes

body {	font-family:Arial;	background:#F44336;
}
.container { background:#fafafa; width:80%; margin:20px auto 2em; box-sizing:border-box; padding:20px; border:1px solid #e0e0e0; border-radius:5px 5px 0 0;
}
.text { line-height:1.6em;	color:#424242;
}
h1 { font-size:2em;	color:#F44336; margin-bottom:.5em;	padding-bottom:.5em; border-bottom:1px solid #e0e0e0;	font-weight: bold;	//font-family:Serif;
}
.go-top { right:1em; bottom:2em; color:#FAFAFA; text-decoration:none; background:#F44336; padding:5px; border-radius:5px; border:1px solid #e0e0e0; position:fixed;
}

Scroll to top button - Script Codes JS Codes

$(document).ready(function() { $('.go-top').hide(0) $(window).scroll(function(){ if($(this).scrollTop() > 100){ $('.go-top').fadeIn(200); } else { $('.go-top').fadeOut(300); } }); $('.go-top').click(function() { event.preventDefault(); $('html , body').animate({scrollTop: 0}, 1000); });
});
Scroll to top button - Script Codes
Scroll to top button - Script Codes
Home Page Home
Developer Dominic Francois
Username DominicFrancois
Uploaded October 10, 2022
Rating 3
Size 3,743 Kb
Views 20,240
Do you need developer help for Scroll to top button?

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!

Dominic Francois (DominicFrancois) Script Codes
Name
Email Template
Dropdown Section Box
Fancy Audio Player
Flat login form
Photography Portfolio
Responsive Navigation
CSS Gradient Animation
Cool to-do list
Accordion Menu
Facebook Style Menu
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!