0

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 3

2

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.

0

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

0

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .