I need to create a floating button that accompanies my scroll as I'm rolling, and in it I want to put a function back to the top.
#voltarAoTopo {
float:right;
z-index:0;
}
<button id="voltarAoTopo">
<i class="material-icons">contacts</i>
</button>
Just create a fixed button in the lower right corner, and put a JavaScript function to go back to the top. The button will only appear after 20 scrolling pixels (this you can adjust as you want):
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() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}p{
display: block; height: 2500px;}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 9999;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}<p>Role para baixo</p>
<button onclick="topFunction()" id="myBtn" title="Ir ao topo">Topo</button>Credit this link .
window.onscroll = function() {scrollFunction()};
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
function scrollToY(scrollTargetY, speed, easing) {
// scrollTargetY: the target scrollY property of the window
// speed: time in pixels per second
// easing: easing equation to use
var scrollY = window.scrollY || document.documentElement.scrollTop,
scrollTargetY = scrollTargetY || 0,
speed = speed || 2000,
easing = easing || 'easeOutSine',
currentTime = 0;
// min time .1, max time .8 seconds
var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
// easing equations from https://github.com/danro/easing-js/blob/master/easing.js
var easingEquations = {
easeOutSine: function (pos) {
return Math.sin(pos * (Math.PI / 2));
},
easeInOutSine: function (pos) {
return (-0.5 * (Math.cos(Math.PI * pos) - 1));
},
easeInOutQuint: function (pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 5);
}
return 0.5 * (Math.pow((pos - 2), 5) + 2);
}
};
// add animation loop
function tick() {
currentTime += 1 / 60;
var p = currentTime / time;
var t = easingEquations[easing](p);
if (p < 1) {
requestAnimFrame(tick);
window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
} else {
window.scrollTo(0, scrollTargetY);
}
}
// call it once to get started
tick();
}
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}p{
display: block; height: 2500px;}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 9999;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}<p>Role para baixo</p>
<button onclick="scrollToY(0, 10000, 'easeInOutSine');" id="myBtn" title="Ir ao topo">Topo</button>Hello,
Set the z-index: considering 9 as above everything, and 0 below all else.
So,
z-index:0
or
z-index:1
Use the position: relative in the parent element of all. In the table have a div that has overflow enabled. And outside of this div place a button with position: absolute.
This pen can help you.
#voltarAoTopo {
float:right;
z-index:0;
position:fixed;
bottom:20px;
right:15px;
}
And in that detail window, put z-index: 9;
Have you tried it like this?