3

Olá, queria saber como faz para fazer quando a pessoa clica, irá para o fim da página. Se puderem me ensinar eu agradeço!! No caso era quando clicasse em algum destes textos, http://prntscr.com/by6y69

3
  • Para o fim mesmo? Ou para uma determinada secção?
    – Miguel
    Commented 27/07/2016 às 14:25
  • Para uma secção que no caso é uma box prntscr.com/by742u
    – user39571
    Commented 27/07/2016 às 14:35
  • Está a usar jquery? Isso não faz com php, mas sim com javascript. Deve acrescentar/substituir as tags javascript e jquery
    – Miguel
    Commented 27/07/2016 às 16:22

1 Resposta 1

5

Para fazer scroll até ao fim da página:

$('#down').on('click', function() {
  $('html, body').animate({
    scrollTop: $(document).height()
  }, 700);
});
#div1 {
 height: 1000px;
 background-color: red;
}
#div2 {
  height: 200px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <button id="down">IR LÁ PARA BAIXO</button>
</div>
<div id="div2"></div>

Para fazer scroll até a um determinado elemento:

var ele = $('#div2');
$('#down').on('click', function() {
  $('html, body').animate({
    scrollTop: ele.offset().top
  }, 700);
});
#div1 {
 height: 1000px;
 background-color: red;
}
#div2 {
  height: 800px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <button id="down">IR PARA DIV2</button>
</div>
<div id="div2"></div>

NOTE que num projeto real em príncipio escusa de colocar a height nas divs, pois a altura destas devem ser definidas pelo seu conteúdo

9
  • Aonde eu colocaria este código?: var ele = $('#div2'); $('#down').on('click', function() { $('html, body').animate({ scrollTop: ele.offset().top }, 700); });
    – user39571
    Commented 27/07/2016 às 14:33
  • Dentro do evento que quer delegar para isso, no meu caso foi dentro do click do botão @Vinicius. Ou seja, no click no botão vai acontecer isso. Pode só ajustar o elemento a clicar, no meu caso foi no elemento cujo id é down
    – Miguel
    Commented 27/07/2016 às 14:35
  • Queria colocar no caso dentro deste código que é como descrito no print: prntscr.com/by74y8 (Código: <li><a href="javascript:void(0);" onclick="getContentPage('topevent');"><span class="glyphicon glyphicon-thumbs-up" style=" font-size: 10pt"></span> Ranking </a></li>)
    – user39571
    Commented 27/07/2016 às 14:36
  • Você consegue mudar o código HTML @Vinicius? Se sim, faça <a href="#" id="down">..., depois na linha a seguir a }, 700); coloque um return false;
    – Miguel
    Commented 27/07/2016 às 14:39
  • Miguel tenho que te dizer, não manjo muito de PHP ou HTML então isto complica para mim, só não estou entendendo aonde adiciona este primeiro código, pois queria que quando clicasse no texto ranking iria para o final da página (Parece ser mais fácil) só isto, se voce puder me explicar de uma forma mais fácil que voce puder acho que eu entendo rs. Espero que não entenda mal.
    – user39571
    Commented 27/07/2016 às 14:45

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