Go SCROLL BACK WITH TOP BUTTON 53

 

-------------------------------------------------------------------------------------------------------------------

READ MORE:

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

http://fbgadgets.blogspot.com/2017/10/mouse-over-mouse-out-in-java-script.html

Go To Top Button

https://codepen.io/matthewcain/pen/ZepbeR

https://codepen.io/rdallaire/pen/apoyx

-------------------------------------------------------------------------------------------------------------------

ADD SCROLL CODE IN LAYOUT FOLDER THEME LIQUID FILE BEFORE

HEAD </head> TAG IF YOU DONT HAVE VENDOR JQUERY FILE USE JQUERY FILE SEPRATEY

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

ELSE WE DON'T NEED JQUERY FILE

IF YOU WANT TO ARROW IN TOP BUTTON 

USE CSS BUTTON AFTER 

CODE USE CSS FONT AWSOME FILES

<style>
#myBtn::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}  
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
OR USE BOOTSTRAP CSS FILE
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<button onclick="topFunction()" id="myBtn" title="Go to top"></button>

-------------------------------------------------------------------------------------------------------------------

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script type="text/javascript">
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
$('html, body').animate({scrollTop:0}, 'slow');
}
</script>

</head>

-------------------------------------------------------------------------------------------------------------------