I want Scroll Up Page in service portal

Mani35 · ‎06-13-2018

I want scroll up button/link , which will send back to top of the page on click.

I wrote this in Header

html:
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
</div>

css:

.return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
.return-to-top:hover i {
color: #fff;
top: 5px;
}

Link Function:

$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});

But I am not able to see that icon also.

Please reply ASAP.

Thanks

ganapati2 · ‎06-13-2018

You can use just below line of HTML code for cursor movement:

Above line takes you to top of th page

Regards

Ganapati

Mani35 · ‎06-18-2018

No Ganapati , its not working

Surendra Raika1 · ‎06-19-2018

You can beautify this code..

<html>
<head>
<style>
.glyphicon glyphicon-upload {
    font-size: 175px;
   height:100%;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: grey;
   color: white;
   text-align: center;
}
.body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}

#myBtn {
display: none;
position: fixed;
   bottom: 0;
     right: 0;
   color:white;
}
</style>
</head>
<body>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

<div class="footer">
<p>Footer</p>
   <button onclick="topFunction()" id="myBtn" title="Go to top" class="btn btn-link">
   <span class="glyphicon glyphicon-upload fa-5x"></span>
   </button>
</div>

<script>
// 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 > 120 || document.documentElement.scrollTop > 120) {
        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;
}
</script>

</body>
</html>