How to apply this scrolling function?

Asked

Viewed 50 times

0

I would like to apply an effect that works as follows, a search in the form that when displayed the result on the page should automatically scroll in place of the div where the search result will be.

Note: Could someone show me an example of how to do this??

This is code from the part that displays the results, how to deploy this javascript function in this code:

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>";
javascript rolling
  • 1

    Really, your question is very wide, in HTML there is the "autofocus" , maybe it helps.

  • interesting, didn’t know, I’ll take a look at it... thank you very much

1 answer

3

Your question is very broad but I think that’s it...

$('#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>

  • 1

    I’ll try to do here with this example of yours

  • I edited my question, as I am still layman, tell me how I would do it using the code I passed above???

Browser other questions tagged javascript rolling

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