<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding a dynamic "Back To Top" floating button with smooth scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}
</style>
</head>
<body>
<div id="page">
<!-- [banner] -->
<header id="banner">
<hgroup>
<h1>Adding a dynamic "Back To Top" floating button with smooth scroll</h1>
</hgroup>
</header>
<!-- [content] -->
<section id="content">
<h1>The first heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec felis sed velit auctor luctus id quis arcu. Ut dui augue, euismod nec justo a, pretium consequat nisi. Vivamus dictum nec quam in sollicitudin. Nullam non augue at risus condimentum consequat eu ut sem. Ut quis tortor quam. Nulla ullamcorper in metus egestas sagittis. In rhoncus feugiat sagittis. Cras eu arcu dui. Nulla non urna varius, facilisis sapien quis, tristique urna.
</p>
<a href="#" class="back-to-top">Back to Top</a>
</section>
<script>
jQuery(document).ready(function() {
var offset = 220; //OR $("#ELEMENT").offset().top
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
</div>
<!-- [/page] -->
</body>
</html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding a dynamic "Back To Top" floating button with smooth scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}
</style>
</head>
<body>
<div id="page">
<!-- [banner] -->
<header id="banner">
<hgroup>
<h1>Adding a dynamic "Back To Top" floating button with smooth scroll</h1>
</hgroup>
</header>
<!-- [content] -->
<section id="content">
<h1>The first heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec felis sed velit auctor luctus id quis arcu. Ut dui augue, euismod nec justo a, pretium consequat nisi. Vivamus dictum nec quam in sollicitudin. Nullam non augue at risus condimentum consequat eu ut sem. Ut quis tortor quam. Nulla ullamcorper in metus egestas sagittis. In rhoncus feugiat sagittis. Cras eu arcu dui. Nulla non urna varius, facilisis sapien quis, tristique urna.
</p>
<a href="#" class="back-to-top">Back to Top</a>
</section>
<script>
jQuery(document).ready(function() {
var offset = 220; //OR $("#ELEMENT").offset().top
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
</div>
<!-- [/page] -->
</body>
</html>
No comments:
Post a Comment