Hello Developer in this example You learn how to implement in your website scroll to top button in your website three simple step you have to follow for that you have to add
1.HTML
2.CSS
3.JQuery
For Arrow logo, you have to add font awesome CDN in the <head> tag
https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Step 2:- You have to add following HTML Code in your footer section of a website.
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
Step 3:- You have to add CSS in your code
<style>
/* Back to top button */
.back-to-top {
position: fixed;
display: none;
background: #18d26e;
color: #fff;
display: inline-block;
width: 44px;
height: 44px;
text-align: center;
line-height: 1;
font-size: 16px;
border-radius: 50%;
right: 15px;
bottom: 15px;
transition: background 0.5s;
z-index: 11;
}
.back-to-top i {
padding-top: 12px;
color: #fff;
}
@media (max-width: 768px) {
.back-to-top {
bottom: 15px;
}
}
</style>
Step 3:- You have to add JS in the js file
<script>
/******************************
BOTTOM SCROLL TOP BUTTON
******************************/
// declare variable
var scrollTop = $(".back-to-top");
$(window).scroll(function() {
// declare variable
var topPos = $(this).scrollTop();
// if user scrolls down - show scroll to top button
if (topPos > 100) {
$(scrollTop).css("opacity", "1");
} else {
$(scrollTop).css("opacity", "0");
}
}); // scroll END
//Click event to scroll to top
$(scrollTop).click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
}); // click() scroll top EMD
</script>
In a post, you have learning BOTTOM TO TOP scroll functionality using code.
No comments:
Post a Comment