1. When you scroll to the bottom, ‘scroll to top’ button will be visible.
2. When you will click on that ‘scroll to top’, button, you will be navigated to the top.
Please find the sample code-
SampleScrollToBottomTop.html
JQuery
| Detecting when user scrolls to bottom of div.
#gh-bt {
position: fixed;
display: block;
width: 32px;
height: 33px;
right: -50px;
bottom: 60px;
overflow: hidden;
z-index: 9;
border: 1px solid #ddd;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#gh-bti {
position: absolute;
clip: rect(0,33px,36px,0);
top: -1px;
left: -1px;
}
button {
-webkit-appearance: button;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
background-color: buttonface;
box-sizing: border-box;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
<script src=
“https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”>
<body style="text-align:center;"
id=”body”>
SalesforceCookCode
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
Sample Data
$(‘#gh-bt’).hide();
$(window).on(‘scroll’, function() {
if ($(window).scrollTop() >= $(
‘.div’).offset().top + $(‘.div’).
outerHeight() – window.innerHeight) {
$(‘#gh-bt’).show();
} else {
$(‘#gh-bt’).hide();
}
});
$(‘#gh-bt’).click(function() {
$(“html, body”).animate({ scrollTop: 0 }, “slow”);
return false;
});
SFDC Arjuna 