Back to top button
Widget Zoom on Hover
MVT Test resulted a win for Back to Top with Text rather than an Arrow.
Design rationale:
- With users having to scroll the page to the bottom for content, a 'Back to Top' button was created to make the experience intuitive.
- This button would allow users to easily return back to the top and continue their purchase journey. It was a functional as well as a design decision to create this button.
- An MVT test was carried with two variations of the button: 1. with an Upward arrow, and 2. 'Back to top' text inside the button.
- After running the test, button with 'Back to top' text did relatively well compared to the arrow button.
- Script:
<style>
#myBtn {
width: 60px;
height: 60px;
display: inline-block;
position: fixed;
bottom: 30px;
right: 30px;
font-size: 10px;
font-weight: bold;
color: white; z-index: 99;
background-color: #155a94;
text-align: center;
border-radius: 50%;
bottom: 30px;
right: 30px;
transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0;
}
#myBtn:hover {
cursor: pointer;
background-color: #333;
}
#myBtn:active {
background-color: #555;
}
#myBtn.show {
opacity: 1; visibility: visible;
}
</style>
<button onclick="topFunction()" id="myBtn" title="Back to Top">BACK TO TOP </button>
<script>
var btn = $('#myBtn');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});
</script>
