0

Eu gostaria de aplicar um efeito que funcionassem da seguinte forma, uma busca no formulário que quando fosse exibido o resultado na página deveria rolar automaticamente no lugar da div onde estará o resultado da pesquisa.

Obs: Alguém poderia me mostrar um exemplo de como fazer isso??

Esse é código da parte que exibe os resultados, como implantar essa função javascript nesse código:

if ($resultados->num_rows > 0) {
    while($linha = mysqli_fetch_array($resultados)) {
        echo utf8_encode("<strong>Nome: </strong>" ."<strong>". $linha['nome']."</strong>" . "</br>");
        print ("<strong>Endereço: </strong>" . $linha['endereco'] . "</br>");
        if (isset($_POST['cidade']) && $_POST['cidade'] === 'sao-gabriel-da-palha') {
            $fromPerson = 'São Gabriel da Palha';
            echo "<strong>Cidade: </strong>" . $fromPerson . "</br>";
        }
        print ("<strong>Telefone: </strong>" . $linha['telefone'] . "</br>");
        echo "<strong>email: </strong>" . $linha['email'] . "</br>";
        if (isset($_POST['palavra'])) { // remover acentos
            $palavra = preg_replace("/&([a-z])[a-z]+;/i", "$1", htmlentities(strtolower(trim($_POST['palavra']))));
        }
        if (!empty($palavra) &&
            in_array($palavra, array('andrey ferraz', 'andrey', 'ferraz', 'andrey martins ferraz'))){
            require 'andreyferraz.php';
        }

    } }else{
   echo "<h3 align='center'>Empresa ainda não cadastrada!</h3>";
2
  • 1
    Realmente, sua pergunta está muito ampla, em HTML existe o "autofocus" , talvez ajude. Commented 16/10/2017 às 16:53
  • interessante, não sabia, vou dar uma olhada a respeito... muito obrigado
    – WPfan
    Commented 16/10/2017 às 16:55

1 Resposta 1

3

Sua pergunta está muito ampla mas creio que seja isso...

$('#search').click(function () {
  var el = $('#' + $('#param').val() );

  if(el != "undefined") {
    $('html, body').animate({
		        scrollTop: $( el ).offset().top
		        }, 500); // Tempo em ms que a animação irá durar
  }
		    
		});
div {
padding: 30px;
background-color: #444;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="param" type="text">
    <input id="search" value="pesquisar" type="button">
    
    <div id="teste1">teste1</div>
    <div id="teste2">teste2</div>
    <div id="teste3">teste3</div>
    <div id="teste4">teste4</div>
    <div id="teste5">teste5</div>
    <div id="teste6">teste6</div>
    <div id="teste7">teste7</div>
    <div id="teste8">teste8</div>

2
  • 1
    vou tentar fazer aqui com esse seu exemplo
    – WPfan
    Commented 16/10/2017 às 16:52
  • eu editei a minha pergunta, como ainda sou leigo, me diga como eu faria isso usando o código que passei acima???
    – WPfan
    Commented 19/10/2017 às 13:17

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