Button that scrolls the page up without reaching the top

Question

Button that scrolls the page up without reaching the top

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

I have a code that scrolls the page to the top, but I do not want it to reach scrollTop = 0. It is possible that by clicking the button, it just slightly raises the page up, as if I had the keyboard above the keyboard?

$(document).ready(function(){ $(window).scroll(function(){ 
	if ($(this).scrollTop() > 10) {
		$('#scroll').fadeIn();
	} 
	else { 
	    $('#scroll').fadeOut(); 
	} 
}); 

$('#scroll').click(function(){ $('html, body').animate({ scrollTop: 0 }, 600); 
return false; 
}); 
});

#scroll {position:fixed; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:#D80000; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:#A80000; opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>
<p>Role a página para baixo...</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='#' id='scroll' title='Voltar ao Topo'>Topo<span/></a>
</body>

javascript html jquery rolamento

asked by anonymous 04.10.2018 / 18:07

2 answers

1

Vitor is like that, the correct thing in programming is always to know how things are done and what each thing does. Then in your code, just change scrollTop property from 0 to 50 for example:

$(document).ready(function(){ $(window).scroll(function(){ 
	if ($(this).scrollTop() > 10) {
		$('#scroll').fadeIn();
	} 
	else { 
	    $('#scroll').fadeOut(); 
	} 
}); 

$('#scroll').click(function(){ $('html, body').animate({ scrollTop: 50 }, 600); 
return false; 
}); 
});

#scroll {position:fixed; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:#D80000; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:#A80000; opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>
<p>Role a página para baixo...</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='#' id='scroll' title='Voltar ao Topo'>Topo<span/></a>
</body>

04.10.2018 / 18:12

enable input button Foreach jquery concatenate in table

score 4 · Accepted Answer

You can scroll the screen "in many pixels" until you reach the top:

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 10) {
            $('#scroll').fadeIn();
        } else {
            $('#scroll').fadeOut();
        }
    });

    $('#scroll').click(function() {
        $('html, body').animate({
            // aqui pega a posição atual e diminui
            scrollTop: $(window).scrollTop() - 50
        }, 600);
        return false;
    });
});

#scroll {position:fixed; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:#D80000; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:#A80000; opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Role a página para baixo...</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href='#' id='scroll' title='Voltar ao Topo'>Topo<span/></a>

I used $(window).scrollTop() to get the current position and decrease by 50 pixels, just by a value that meets you here and go rolling until you reach the top.