Scroll down "Scrollar" Slow and Automatic Page with Javascript

Asked

Viewed 542 times

1

I have a page that shows some information on a monitor that will not have human intervention (will not have user manipulating the page), will be on display only. But the content is very large and I need the page to go down alone to show all the content. I have tried using Jquery’s Animate, but was unsuccessful.

Follows my code: 

<!DOCTYPE html>

<html style="position: relative; min-height: 100%;">
<head>
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<link rel="icon" href="~/Content/Imagens/logo_araguaina.ico" />
<link rel="stylesheet" href="~/Content/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/CSS/painel-chegada-partida.css" />
<script type="text/javascript" src="~/Scripts/mostra-data-hora.js"></script>
<script type="text/html" src="~/scripts/jquery-1.10.2.min.js"></script>
</head>
<body onload="startTime()" style="overflow-x: hidden">
<div>@RenderBody()</div>

<div class="row">
<div class="col-md-4 ml-md-3">
    <img src="~/Content/Imagens/Logo-Prefeitura-De-Araguaina (1).png" style="height: 70px;" />
</div>
<div class="col-md-4 d-md-flex justify-content-md-center mt-md-2">
    <h2 style="font-size: 37px;" class="font-weight-bold">PARTIDAS</h2>
</div>
<div class="col-md-3 ml-md-5 d-md-flex justify-content-md-end">
    <img src="~/Content/Imagens/Logo ASTT e Acesso.png" style="height: 70px;" />
</div>
</div>
<div>
<table class="table table-sm table-striped table-active" style="overflow-x: auto; overflow-y: auto;">
    <thead style="background-color:black; color: white; font-size: 22px;">
        <tr>
            <th style="width: 110px;">LINHA</th>
            <th style="width: 150px;">EMPRESA</th>
            <th style="width: 260px;">ORIGEM</th>
            <th style="width: 300px;">DESTINO</th>
            <th style="text-align: center; width: 100px;">PARTIDA</th>
            <th style="text-align: center; width: 120px;">CHEGADA</th>
            <th style="text-align: center; width: 60px;">BOX</th>
            <th style="text-align: center;">OBSERVAÇÃO</th>
        </tr>
    </thead>
    <tbody class="font-weight-bold" style="font-size: 18px;">
        @foreach (var partidas in ViewBag.Partidas)`
        {
            if (partidas.Ds_Cidade_Origem == "PARTIDAS DO DIA")
            {
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
            }
            else
            {
                <tr>
                    <td>@partidas.Cd_Cod_Linha</td>
                    @*<td style="text-align: left;">@chegadas.Ds_Empresa</td>*@
                    @if (partidas.Ds_Caminho_Logo == "")
                    {
                        <td style="text-align: left;">@partidas.Ds_Empresa</td>
                    }
                    else
                    {
                        <td style="text-align: left;"><img height="35" src="~/Content/Imagens/@partidas.Ds_Caminho_Logo" /></td>

                        @*<td style="text-align: left;"><img height="35" src="/Imagens/logoACESSO.png" /></td>*@
                    }
                    <td style="vertical-align: middle; text-align: left;">@partidas.Ds_Cidade_Origem</td>
                    <td style="vertical-align: middle; text-align: left;">@partidas.Ds_Cidade_Destino</td>
                    <td style="text-align: center; vertical-align: middle;">@partidas.Hr_Previsao_Saida</td>
                    <td style="text-align: center; vertical-align: middle;">@*@partidas.Hr_Chegada_Local*@</td>
                    <td style="text-align: center; vertical-align: middle;">@partidas.Ds_Plataforma</td>
                    <td style="color: red;"><marquee>@partidas.Ds_Observacao</marquee></td>
                    @*<td><div class="marquee"><span>@partidas.Ds_Observacao</span></div></td>*@
                </tr>
            }
        }
    </tbody>
</table>
</div>

<footer style="background-color: black; bottom: 0;" class="col-md-12 position-absolute">
<div class="row">
    <div class="col-md-4 d-md-flex justify-content-md-center w-25">
        <!--inicio Widget previsão do tempo Araguaina CPTEC/INPE -->
        <iframe allowtransparency="true" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://www.cptec.inpe.br/widget/widget.php?p=558&w=n&c=000000&f=ffffff" height="45" width="260"></iframe><noscript>Previs&atilde;o de <a href="http://www.cptec.inpe.br/cidades/tempo/558">Araguaína/TO</a> oferecido por <a href="http://www.cptec.inpe.br">CPTEC/INPE</a></noscript>
        <!--fim Widget previsão do tempo Araguaina CPTEC/INPE -->
    </div>
    <div class="col-md-4 d-md-flex justify-content-md-center font-weight-bold" style="margin-top: -10px;">
        <span class="mostra-hora"></span>
    </div>
    <div class="col-md-4 d-md-flex justify-content-md-center w-25">
        <!--inicio Widget previsão do tempo Palmas CPTEC/INPE -->
        <iframe allowtransparency="true" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://www.cptec.inpe.br/widget/widget.php?p=236&w=n&c=000000&f=ffffff" height="45" width="260"></iframe><noscript>Previs&atilde;o de <a href="http://www.cptec.inpe.br/cidades/tempo/236">Palmas/TO</a> oferecido por <a href="http://www.cptec.inpe.br">CPTEC/INPE</a></noscript>
        <!--fim Widget previsão do tempo Palmas CPTEC/INPE -->
    </div>
</div>
</footer>

<script type="text/javascript" defer="defer">


var url = "@Url.Action("MostraAviso", "Mensagem")";

window.onload = function abreChegadas() {
    window.setTimeout(function () {
        window.location.href = url;
    }, 15000);
}
</script>
</body>
</html>
javascript animate

  • The whole page??

  • You can do it this way: https://answall.com/a/270716/99718

1 answer

1


You can use the Animate even to do the effect.

I made below an example where the animation is based on the height of the body and the height of the window to calculate the speed (see comments in the code). Just add the script to the page and the animation starts:

Script:

<script>
$(function(){
   (function inicia(){
      var altura_pagina = $("body").outerHeight(true);
      var altura_janela = window.innerHeight;
      var velocidade = 5000; // quanto maior, mais lento
      var intervalo = 3 // intervalo em segundos para reinicar

      $(this).scrollTop(0);

      $('html, body').animate({
         scrollTop: altura_pagina-altura_janela
      }, (altura_pagina/500) * velocidade, "linear", function(){
         setTimeout(function(){
            inicia();
         }, intervalo*1000);
      });
   }());
});
</script>

Example based on your code:

<!DOCTYPE html>

<html style="position: relative; min-height: 100%;">
<head>
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<link rel="icon" href="~/Content/Imagens/logo_araguaina.ico" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script>
$(function(){
   (function inicia(){
      var altura_pagina = $("body").outerHeight(true);
      var altura_janela = window.innerHeight;
      var velocidade = 5000; // quanto maior, mais lento
      var intervalo = 3 // intervalo em segundos para reinicar

      $(this).scrollTop(0);

      $('html, body').animate({
         scrollTop: altura_pagina-altura_janela
      }, (altura_pagina/500) * velocidade, "linear", function(){
         setTimeout(function(){
            inicia();
         }, intervalo*1000);
      });
   }());
});
</script>

<link rel="stylesheet" href="~/Content/CSS/painel-chegada-partida.css" />
<script type="text/javascript" src="~/Scripts/mostra-data-hora.js"></script>

</head>
<body style="overflow-x: hidden">
<div>@RenderBody()</div>

<div class="row">
<div class="col-md-4 ml-md-3">
    <img src="~/Content/Imagens/Logo-Prefeitura-De-Araguaina (1).png" style="height: 70px;" />
</div>
<div class="col-md-4 d-md-flex justify-content-md-center mt-md-2">
    <h2 style="font-size: 37px;" class="font-weight-bold">PARTIDAS</h2>
</div>
<div class="col-md-3 ml-md-5 d-md-flex justify-content-md-end">
    <img src="~/Content/Imagens/Logo ASTT e Acesso.png" style="height: 70px;" />
</div>
</div>
<div>
<table class="table table-sm table-striped table-active" style="overflow-x: auto; overflow-y: auto;">
    <thead style="background-color:black; color: white; font-size: 22px;">
        <tr>
            <th style="width: 110px;">LINHA</th>
            <th style="width: 150px;">EMPRESA</th>
            <th style="width: 260px;">ORIGEM</th>
            <th style="width: 300px;">DESTINO</th>
            <th style="text-align: center; width: 100px;">PARTIDA</th>
            <th style="text-align: center; width: 120px;">CHEGADA</th>
            <th style="text-align: center; width: 60px;">BOX</th>
            <th style="text-align: center;">OBSERVAÇÃO</th>
        </tr>
    </thead>
    <tbody class="font-weight-bold" style="font-size: 18px;">
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="linha-data-seguinte" style="text-align: center; background-color: rgba(245, 184, 52, 0.63);">
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                        @partidas.Ds_Cidade_Origem @partidas.Ds_Cidade_Destino @partidas.Hr_Previsao_Saida
                        <img class="imagem-seta" src="~/Content/Imagens/seta-para-baixo_318-1470.png" />
                    </td>
                </tr>

    </tbody>
</table>

</div>

<footer style="background-color: black; bottom: 0;" class="col-md-12 position-absolute">
<div class="row">
    <div class="col-md-4 d-md-flex justify-content-md-center w-25">
        <!--inicio Widget previsão do tempo Araguaina CPTEC/INPE -->
        <iframe allowtransparency="true" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://www.cptec.inpe.br/widget/widget.php?p=558&w=n&c=000000&f=ffffff" height="45" width="260"></iframe><noscript>Previs&atilde;o de <a href="http://www.cptec.inpe.br/cidades/tempo/558">Araguaína/TO</a> oferecido por <a href="http://www.cptec.inpe.br">CPTEC/INPE</a></noscript>
        <!--fim Widget previsão do tempo Araguaina CPTEC/INPE -->
    </div>
    <div class="col-md-4 d-md-flex justify-content-md-center font-weight-bold" style="margin-top: -10px;">
        <span class="mostra-hora"></span>
    </div>
    <div class="col-md-4 d-md-flex justify-content-md-center w-25">
        <!--inicio Widget previsão do tempo Palmas CPTEC/INPE -->
        <iframe allowtransparency="true" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://www.cptec.inpe.br/widget/widget.php?p=236&w=n&c=000000&f=ffffff" height="45" width="260"></iframe><noscript>Previs&atilde;o de <a href="http://www.cptec.inpe.br/cidades/tempo/236">Palmas/TO</a> oferecido por <a href="http://www.cptec.inpe.br">CPTEC/INPE</a></noscript>
        <!--fim Widget previsão do tempo Palmas CPTEC/INPE -->
    </div>
</div>
</footer>

<script type="text/javascript" defer="defer">



//var url = "@Url.Action('MostraAviso', 'Mensagem')";
//
//window.onload = function abreChegadas() {
//    window.setTimeout(function () {
//        window.location.href = url;
//    }, 150000);
//}
</script>
</body>
</html>

  • That’s right! It worked perfectly. Just one more question, how do I so that at the end of the Scroll it redirects to another page instead of restarting the Animate?

  • To wait a few seconds.

  • Where you have "start()" within the setTimeout, you change to Location.href = "page.html";

  • I tried to do that, but then he doesn’t start the Animate when he loads the page

  • Already have, I use MVC. I put the animation code in the header file of the site, all pages use this header.

  • No page started animation?

  • No. It redirects at the interval I’ve determined, but it doesn’t animate.

  • You want me to ask another question?

  • When I put Location.href it does not Animate on any page, it just redirects to the other page which also does not animate

  • I found the problem. They were both () at the end of the script. Take a look at the response I updated.

  • https://i.stack.Imgur.com/wt90z.png

  • That’s what it was. Now it’s worked on both Animate and Location.href. Thank you very much!

  • @Diegogrossi Just one more thing, you can erase that too $(this).stop();.

  • Thank you very much again!

Show 9 more comments

Browser other questions tagged javascript animate

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