I want the scroll to top button at the bottom right corner of the page but not within a web part zone. I'm not very good at html either and have found sources that kinda help me but they all mention adding CSS and jquery which I know nothing about.. Please help!
2 Answers
This is a very functional w3schools demo ( which is the source of this answer )
This is the styles part, which goes to btnstyle.css
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
This is the javscript part which goes into either a script editor or a file ScrollButton.js
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";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Have a content editor webpart, with the html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<path>/btnstyle.css">
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script src="<path>/ScrollButton.js"
</body>
</html>
Try this out and let me know if you are still facing issues :)
If you want it scroll to top on every page, than you need to put following code in master page within div having id s4-bodyContainer. For a single page you can put the code in content editor web part. (Code provided below)
Also, the simplest solution we can provide will require at least HTML knowledge. No need of CSS and JS/JQ. CSS is used to make it beautiful whereas JS and JQ provide high level of scrolling.
Just put a paragraph as first child of s4-bodyContainer (for all pages) or add a content editor web part as the first web part on a page and write following HTML.
<p id="topOfPage" style="visibility: hidden; height: 1px;">To of Page </p>
<a href="#topOfPage" style="position: fixed; right: 20px; bottom: 20px">Scroll To Top</a>
This is it. You will have a hyperlink at the bottom to scroll to top of page. You can apply CSS to hyperlink i.e. <a> tag to look good as per your design.
