Back to top
while developing web sites or web apps we usually need scroll to top interactivity for better user experience to for this purpose if a user scroll a web page then there must be a way so that on clicking user can go top of the page for this purpose we can use back to top jquery plugin if you want a detail explanation try to follow the code
Requirement for scroll to top
- First include the jquery cdn or download jquery script and link it to in your web page .
- Second thing a function to be called if the page scroll down to a defined limit this function can be put in a external script or you can include it on your current web page so in the following example i am including the function on the single page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Function to be called in your page
Make sure you have to call this function after the totop class in webpage or it may conflict
<script>
$('.totop').tottTop({
scrollTop: 100
});
</script>
Logic behined scrollto top / Function in external script
(function($) {var methods = { to_top: function() {
$('html, body').animate({
scrollTop: 0
}, 1000);
return false;
}
};
$.fn.tottTop = function(options) {
var settings = $.extend({
scrollTop: 800,
duration: 1000,
scrtollTopBtnDuration: 400
}, options);
return this.each(function() {
var $this = $(this);
var win = $(window);
win.scroll(function() {
if (win.scrollTop() > settings.scrollTop) {
$this.fadeIn(settings.scrtollTopBtnDuration);
} else {
$this.fadeOut(settings.scrtollTopBtnDuration);
}
});
$this.click(methods.to_top);
});
};
})(jQuery);
Html code for demo purpose. You can copy and paste the following code for better understanding and experiment purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Back To Top Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
<script>
(function($) {
var methods = {
to_top: function() {
$('html, body').animate({
scrollTop: 0
}, 1000);
return false;
}
};
$.fn.tottTop = function(options) {
var settings = $.extend({
scrollTop: 800,
duration: 1000,
scrtollTopBtnDuration: 400
}, options);
return this.each(function() {
var $this = $(this);
var win = $(window);
win.scroll(function() {
if (win.scrollTop() > settings.scrollTop) {
$this.fadeIn(settings.scrtollTopBtnDuration);
} else {
$this.fadeOut(settings.scrtollTopBtnDuration);
}
});
$this.click(methods.to_top);
});
};
})(jQuery);
</script>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
line-height: 1.7;
font-family: 'Quicksand';
}
body { background-color: #FFCD69; }
p{padding:100px;}
.totop {
position: fixed;
bottom: 50px;
right: 50px;
cursor: pointer;
display: none;
background: #a05b7e;
color: #fff;
border-radius: 25px;
height: 50px;
line-height: 50px;
padding: 0 30px;
font-size: 18px;
}
</style>
<h3 style="text-align:center;padding:50px;">Scroll down the page</h3>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
<p>Lorem ipsum is the demo content </p>
</div>
<div class="totop"><i class="fa fa-angle-up"></i> To Top</div>
<script>
$('.totop').tottTop({
scrollTop: 100
});
</script>
</body>
</html>
No comments:
Post a Comment