Olá, gostaria de saber como posso fazer um link para minha página de vídeos que role a página para baixo, porém esta página não contém nenhum id para utilizar no modo: <a href="linkdapagina#localdesejado">
. Tem outra forma? Por exemplo, esse link abre a página e depois faz um scroll de 50% para baixo?
3 Respostas
Caso esteja usando PHP
, pode passar um parâmetro no link, parecido com
www.seusite.com.br/video1?scroll=true
Na seção video1 verifique se GET['scroll'] == 'true'
, caso seja, de um print na seguinte função javascript (ignore o resto)
var metadeDaTela = $(window).height() / 2;
var body = $("html, body");
body.stop().animate({scrollTop:metadeDaTela}, 500, 'swing');
body{
height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
</body>
Na função ele pega a quantidade de pixels da tela e divide por dois, para passar como parâmetro no método scrollTop
, assim ele irá descer até a metade da página.
Caso queira uma solução somente em javascript
, terá de apelar para localStorage
ou até mesmo SPA´s
.
O melhor jeito de fazer isso é com JavaScript e JQuery com a seguinte função.
Lembre-se de importar o Jquery no head de seu html, se não estiver já adicionado importe ele com:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
JS:
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".segundo").offset().top},
'slow');
});
HTML:
<div class="primeiro"><button type="button">Mostra efeito</button></div>
<div class="segundo">Efeito de Scroll</div>
CSS:
.primeiro {
width: 100%;
height: 1000px;
background: #ccc;
}
.segundo {
width: 100%;
height: 1000px;
background: #999;
}
Veja esse exemplo aqui > Codepen - OnClick Scroll page Javascript & Jquery
Com JavaScript puro, você pode fazer deste modo:
URL da página:
meusite.com.br/#localdesejado
ou
meusite.com.br/index.html#localdesejado
ou
meusite.com.br/index.html?localdesejado
Script:
(function(){
url_ = location.href;
if(url_.match(/localdesejado/)){
setTimeout("window.scrollTo(0,document.body.scrollHeight/2)",1);
}
})();
O script verifica se a string "localdesejado" passado na URL (ex.: meusite.com.br/#localdesejado
) está presente e faz o scroll
até a metade da tela.
Usei o parâmetro "localdesejado" apenas como exemplo. Você pode usar o termo que quiser no script.
Por que usei setTimeout
?
Porque alguns navegadores (não sei se todos, talvez todos) voltam a tela ao topo automaticamente após o window.scrollTo
. Usando setTimeout
, mesmo com um valor mínimo de 1
, esse problema com o navegador é contornado e a tela não volta ao topo.