Scroll Back To Top Button in wordpress
DOWNLOAD JS FILE from https://jquery.com/download/ = jquery.min.js (jquery-3.4.1.js)
<html>
<head>
<style>
/****************************************
IMPORTANT
*****************************************/
.scrollTop {
position: fixed;
right: 10%;
bottom: 10px;
background-color: #BE3F48;
padding: 20px;
opacity: 0;
transition: all 0.4s ease-in-out 0s;
}
.scrollTop a {
font-size: 18px;
color: #fff;
}
</style>
<script src="<?php echo plugin_dir_url(__FILE__);?>/js/jquery.min.js"></script>
<script>
// BY KAREN GRIGORYAN
$(document).ready(function() {
/******************************
BOTTOM SCROLL TOP BUTTON
******************************/
// declare variable
var scrollTop = $(".scrollTop");
$(window).scroll(function() {
// declare variable
var topPos = $(this).scrollTop();
// if user scrolls down - show scroll to top button
if (topPos > 300) {
$(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
/*************************************
LEFT MENU SMOOTH SCROLL ANIMATION
*************************************/
// declare variable
var h1 = $("#h1").position();
var h2 = $("#h2").position();
var h3 = $("#h3").position();
$('.link1').click(function() {
$('html, body').animate({
scrollTop: h1.top
}, 500);
return false;
}); // left menu link2 click() scroll END
$('.link2').click(function() {
$('html, body').animate({
scrollTop: h2.top
}, 500);
return false;
}); // left menu link2 click() scroll END
$('.link3').click(function() {
$('html, body').animate({
scrollTop: h3.top
}, 500);
return false;
}); // left menu link3 click() scroll END
}); // ready() END
</script>
</head>
<body>
<div class="right">
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
<div>sdfdfsdfdfdsfdfsdfdfdfdsfdsf<div>
</div>
<div id="stop" class="scrollTop">
<span><a href="">Top</a></span>
</div>
<!-- main-->
</body>
</html>
No comments:
Post a Comment