Button that scrolls the page up without reaching the top

Asked

Viewed 203 times

2

I have a code that scrolls the page to the top, but I don’t want it to reach scrollTop = 0. It’s possible that by clicking the button, it just slightly climbs the page up, as if I had keyboard the arrow up 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 rolling
  • 1

    It would not just edit the value called in the function animate? $('#scroll').click(function(){ $('html, body').animate({ scrollTop: 50 }, 600);

2 answers

4


You can scroll the screen "so many on so 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 take the current position and decrease 50 pixels, just for a value that serves you here and scroll until you reach the top.

  • Ricardo, I mark your answer as the correct one because this "- 50" is exactly what I needed! I also thank the other colleagues who answered, however I do not want to scroll the page to a specific point and, yes, return so many pixels from where the user is at the moment. Thanks a lot, guys!

1

Vitor is like this, the correct programming is always knowing how things are done and what each thing does. Then in your code you just change the value of the property scrollTop of 0 for 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>

Browser other questions tagged javascript html jquery rolling

You are not signed in. Login or sign up in order to post.