Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fernandroid

Gostaria de configurar dois botoes para rolar a pagina (descer e subir)

Recommended Posts

Queria configurar os botoes de subir e descer para dar scroll na pagina. 

Atualmente só consegui dar um scroll em uma determina parte da pagina, gostaria de configurar para ir clicando e a pagina rolando para baixo ou para cima. 

Aqui está o codigo exemplo, se clicar no texto, o popup abre com os tres botoes, o botao "fechar" ja consegui configurar.

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		html, body {
			background: silver;
			color: #fff;
			overflow: hidden;
			touch-action: none;
			-ms-touch-action: none;
		}
		canvas {
			touch-action-delay: none;
			touch-action: none;
			-ms-touch-action: none;
		}
		.container_black{
			background: rgba(0,0,0,0.3);
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 9999;
			top: 0;
			left: 0;
			display:none
		}
		
		.container_popup{
			background: #fff;
			width: 90%;
			height: 90%;
			overflow: auto;
			position: fixed;
			top: 5%;
			left: 5%;
			color: #666;
			padding: 10px;
			box-sizing: border-box;
			font-family: Tahoma, Geneva, sans-serif;
			border: 3px solid #666;
			box-shadow: -3px 3px 4px 1px rgba(0, 0, 0, 0.33);
		}
		
		.container_popup h1 {margin: 10px 0;}
		.container_popup p { margin: 10px 0; }
		
		.fechar_popup{
			padding: 10px;
			text-align: center;
			background: #666;
			color: #fff;
			font-weight: bold;
			font-family: Tahoma, Geneva, sans-serif;
			text-transform: uppercase;
			width: 20px;
			cursor: pointer;
			position: fixed;
			right: 5%;
			top: 5%;
		}
        
        .descer{
			padding: 10px;
			text-align: center;
			background: #666;
			color: #fff;
			font-weight: bold;
			font-family: Tahoma, Geneva, sans-serif;
			text-transform: uppercase;
			width: 30px;
			cursor: pointer;
			position: fixed;
			right: 5.5%;
			top: 86.5%;
		}
         .subir{
			padding: 10px;
			text-align: center;
			background: #666;
			color: #fff;
			font-weight: bold;
			font-family: Tahoma, Geneva, sans-serif;
			text-transform: uppercase;
			width: 30px;
			cursor: pointer;
			position: fixed;
			right: 5.5%;
			top: 77%;
        
    </style>

</head>
<body>



<div class="container_black">
		<div class="container_popup">
        <div id="lista">
			<h1>Política de Privacidade</h1>
			<p>Esses tipos de serviços permitem a interação com as redes sociais ou outras plataformas externas diretamente a partir das páginas deste serviço (este aplicativo). A interação e as informações obtidas por este aplicativo estão sempre sujeitas às configurações de privacidade do usuário em cada rede social. Se um serviço que permite a interação com as redes sociais estiver instalado poderá coletar dados de tráfego para as páginas, onde o serviço esteja instalado, mesmo quando os usuários não estiverem usando os mesmos.</p>
<h4>O botão Curtir e widgets sociais do Facebook (Facebook, Inc.)</h4>
<p>O botão Curtir do Facebook e widgets sociais são serviços que permitem a interação com a rede social Facebook fornecido pela Facebook, Inc.</p>
<p>Dados pessoais coletados: cookie e dados de uso. Local de processamento: EUA  Política de Privacidade.</p>
<h3>Contatar o usuário</h3>
<h4>Lista de endereçamento ou boletim informativo (este aplicativo)</h4>
<p>Ao registar-se na lista de endereçamento ou no boletim informativo, o endereço de e-mail do usuário será adicionado à lista de contatos daqueles que podem receber mensagens de e-mail que contenham informações de natureza comercial ou promocional sobre este Aplicativo. O seu endereço de e-mail também poderá ser adicionado a esta lista, como resultado de sua inscrição neste serviço (este aplicativo).</p>
<h2>Informações adicionais sobre a coleta e processamento de dados</h2>
<h3>Ação jurídica</h3>
<p>Os dados pessoais dos usuários podem ser utilizados para fins jurídicos pelo controlador de dados em juízo ou nas etapas conducentes à possível ação jurídica decorrente de uso indevido deste serviço (este aplicativo) ou dos serviços relacionados.</p>
<p>O usuário declara estar ciente de que o controlador dos dados poderá ser obrigado a revelar os dados pessoais mediante solicitação das autoridades governamentais.</p>
<h3>Informações adicionais sobre os dados pessoais do usuário</h3>
<p>Além das informações contidas nesta política de privacidade, este aplicativo poderá fornecer ao usuário informações adicionais e contextuais sobre os serviços específicos ou a coleta e processamento de dados pessoais mediante solicitação.</p>
<h3>Logs do sistema e manutenção</h3>
<p>Para fins de operação e manutenção, este aplicativo e quaisquer serviços de terceiros poderão coletar arquivos que gravam a interação com este aplicativo (logs do sistema) ou usar, para este fim, outros dados Pessoais (tais como o endereço IP).</p>
<h3>As informações não contidas nesta política</h3>
<p>Mais detalhes sobre a coleta ou processamento de dados pessoais podem ser solicitados ao controlador de dados, a qualquer momento. Favor ver as informações de contato no início deste documento.</p>
<h3>Os direitos dos usuários</h3>
<p>Os usuários têm o direito de, a qualquer tempo, consultar o controlador de dados para saber se os seus dados pessoais foram armazenados e saber mais sobre o conteúdo e origem, verificar a sua exatidão ou para pedir que sejam complementados, cancelados, atualizados ou corrigidos, ou que sejam transformados em formato anônimo ou bloquear quaisquer dados mantidos em violação da lei, bem como se opor ao seu tratamento por quaisquer todas as razões legítimas. Os pedidos devem ser enviados para o controlador de dados usando a informação de contato fornecida anteriormente.</p>
<p>Este aplicativo não suporta pedidos de &#8220;Não me rastreie&#8221;.</p>
<p>Para determinar se qualquer um dos serviços de terceiros que utiliza honram solicitações de &#8220;Não me rastreie&#8221;, por favor leia as políticas de privacidade.</p>
<h3>Mudanças nesta política de privacidade</h3>
<p>O controlador de dados se reserva o direito de fazer alterações nesta política de privacidade a qualquer momento, mediante comunicação aos seus usuários nesta página. É altamente recomendável que esta página seja consultada várias vezes em relação à última modificação descrita na parte inferior. Se o Usuário não concorda com qualquer das alterações da política de privacidade, o usuário deve cessar o uso deste serviço (este aplicativo) e pode solicitar ao controlador de dados que apague os dados pessoais dele. Salvo disposição em contrário, a atual política de privacidade se aplica a todos os dados pessoais dos usuários que o controlador de dados tiver.</p>
<h3>Definições e referências jurídicas</h3>
<h3>Dados pessoais (ou dados)</h3>
<p>Quaisquer informações relativas a uma pessoa física, pessoa jurídica, instituição ou associação, as quais sejam, ou possam ser identificadas, mesmo que indiretamente, por referência a quaisquer outras informações, incluindo um número de identificação pessoal.</p>
<h3>Dados de uso</h3>
<p>As informações coletadas automaticamente a partir deste serviço (ou serviços de terceiros contratados neste serviço (este aplicativo), que podem incluir: os endereços IP ou nomes de domínio dos computadores utilizados pelos usuários que utilizam este aplicativo, os endereços URI (Identificador Uniforme de Recurso), a data e hora do pedido, o método utilizado para submeter o pedido ao servidor, o tamanho do arquivo recebido em resposta, o código numérico que indica o status do servidor de resposta (resultado positivo, erro , etc.), o país de origem, as características do navegador e do sistema operacional utilizado pelo usuário, os vários detalhes de tempo por visita (por exemplo, o tempo gasto em cada página dentro do aplicativo) e os detalhes sobre o caminho seguido dentro da aplicação, com especial referência à sequência de páginas visitadas e outros parâmetros sobre o sistema operacional do dispositivo e/ou ambiente de TI do Usuário.</p>
<h3>Usuário</h3>
<p>A pessoa que usa este aplicativo que deverá coincidir com ou estar autorizada pelo titular dos dados a quem os dados pessoais se referem.</p>
<h3>Titular dos dados</h3>
<p>A pessoa jurídica ou física a quem os dados pessoais se referem.</p>
<h3>Processador de dados (ou supervisor de dados)</h3>
<p>A pessoa física, pessoa jurídica, a administração pública ou qualquer outro órgão, associação ou organização autorizada pelo controlador de dados para o processamento dos dados pessoais em conformidade com esta política de privacidade.</p>
<h3>Controlador de dados (ou proprietário)</h3>
<p>A pessoa física, pessoa jurídica, administração pública ou qualquer outra entidade, associação ou organização com direitos, também em conjunto com outro controlador dos dados, para tomar decisões sobre as finalidades e os métodos de processamento de dados pessoais e os meios utilizados, incluindo medidas de segurança relativas ao funcionamento e ao uso deste serviço. O controlador de dados, a menos que seja especificado de outra forma, é o proprietário deste serviço (este aplicativo).</p>
<h3>Este aplicativo / Jogo</h3>
<p>A ferramenta de hardware ou software pela qual os dados pessoais do usuário são coletados.</p>
<h3>Cookie</h3>
<p>Pequenas unidades de dados armazenados no dispositivo do usuário.</p>
<h2>Informação jurídica</h2>
<p>Aviso aos usuários europeus: esta declaração de privacidade foi elaborada em cumprimento das obrigações nos termos do art. n.10 da Diretiva 95/46/CE, e de acordo com as disposições da Diretiva 2002/58/CE, tal como revisto pela Diretiva 2009/136/CE, sobre o assunto de Cookies.</p>
<p>Esta política de privacidade é apenas sobre este Aplicativo/Jogo.</p>
<p><bltima atualização:</b> 25 de Fevereiro de 2018</p>
<p>&nbsp;</p>
</div>
 
		<div class="fechar_popup">X</div>
        <div class="descer">⬇</div>
        <div class="subir">⬆</div>
	</div><!--container_popup-->
	</div><!--container_black-->

	<div id="fb-root"></div>
    
    
    
<p>Clique para aparecer o poup</p>
<p>Clique para aparecer o poup</p>
<p>Clique para aparecer o poup</p></div>

<script>
$(document).ready(function(){
    $("p").click(function(){
      $(".container_black").fadeIn(); 
    });
});
</script> 

<script>
$(document).ready(function(){
      $(".fechar_popup").click(function(){
			$(".container_black").fadeOut();
              });       
});
</script> 

	
<script>
$(document).ready(function(){
      $(".descer").click(function(){
			$(".container_popup").animate({
        scrollTop: 1000
    }, 1000);
              });       
});
</script> 

<script>
$(document).ready(function(){
      $(".subir").click(function(){
			$(".container_popup").animate({
        scrollTop: 0
    }, 500);
              });       
});
</script>

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por 4Unknow
      Fala galera, mais uma dúvida aqui.
      Eu to usando uma página para criar minhas políticas de privacidade e cookies, informações no caso.

      Porém coloco todas informações na página, mas quando clico em um item não aparece tudo o que eu digitei, se notarem no código fonte tem muito mais texto e informação para mostrar mas ele corta.

      Vou deixar link para download do mediafire do arquivo, não tem anuncio de nada no arquivo, apenas html puro mesmo e css com informações bem básicas.
       
      BAIXAR PÁGINA.ZIP

      Grato pela ajuda.
    • Por 4Unknow
      Fala galerinha beleza, bom vamos lá.
      Eu tenho um site que o conteúdo dele é tudo em uma página só, o menu, quando escolho uma opção ele leva em uma determinada parte do site referente ao menu clicado. Até aqui ok.
      Porém eu instalei um botão para voltar para o topo quando rola o site para baixo, e como sou leigo em Java, notei que parece que tá tendo conflito com o ScrollTop, pois o botão que coloquei para voltar para o topo também tem o scrolltop. Gostaria de fazer funcionar o menu e o botão juntos, pois quando desativo o .js do botão o menu  funciona normal, quando ativo o botão novamente ele para de funcionar.

      Vou deixar o código de ambos aqui.

      .JS do Menu (scroll.min.js)

       
      (function(e){"use strict";var t="ScrollIt",n="1.0.3";var r={upKey:38,downKey:40,easing:"linear",scrollTime:600,activeClass:"active",onPageChange:null,topOffset:0};e.scrollIt=function(t){var n=e.extend(r,t),i=0,s=e("[data-scroll-index]:last").attr("data-scroll-index");var o=function(t){if(t<0||t>s)return;var r=e("[data-scroll-index="+t+"]").offset().top+n.topOffset+1;e("html,body").animate({scrollTop:r,easing:n.easing},n.scrollTime)};var u=function(t){var n=e(t.target).closest("[data-scroll-nav]").attr("data-scroll-nav")||e(t.target).closest("[data-scroll-goto]").attr("data-scroll-goto");o(parseInt(n))};var a=function(t){var r=t.which;if(e("html,body").is(":animated")&&(r==n.upKey||r==n.downKey)){return false}if(r==n.upKey&&i>0){o(parseInt(i)-1);return false}else if(r==n.downKey&&i<s){o(parseInt(i)+1);return false}return true};var f=function(t){if(n.onPageChange&&t&&i!=t)n.onPageChange(t);i=t;e("[data-scroll-nav]").removeClass(n.activeClass);e("[data-scroll-nav="+t+"]").addClass(n.activeClass)};var l=function(){var t=e(window).scrollTop();var r=e("[data-scroll-index]").filter(function(r,i){return t>=e(i).offset().top+n.topOffset&&t<e(i).offset().top+n.topOffset+e(i).outerHeight()});var i=r.first().attr("data-scroll-index");f(i)};e(window).on("scroll",l).scroll();e(window).on("keydown",a);e("body").on("click","[data-scroll-nav], [data-scroll-goto]",function(e){e.preventDefault();u(e)})}})(jQuery)  
      .JS do Botão Back to top (backtotop.js)

       
      jQuery(window).scroll(function(){ if(jQuery(window).scrollTop()<50){ jQuery('#rocketmeluncur').slideUp(500); }else{ jQuery('#rocketmeluncur').slideDown(500); } var ftrocketmeluncur = jQuery("#ft")[0] ? jQuery("#ft")[0] : jQuery(document.body)[0]; var scrolltoprocketmeluncur = $('rocketmeluncur'); var viewPortHeightrocketmeluncur = parseInt(document.documentElement.clientHeight); var scrollHeightrocketmeluncur = parseInt(document.body.getBoundingClientRect().top); var basewrocketmeluncur = parseInt(ftrocketmeluncur.clientWidth); var swrocketmeluncur = scrolltoprocketmeluncur.clientWidth; if (basewrocketmeluncur < 1000) { var leftrocketmeluncur = parseInt(fetchOffset(ftrocketmeluncur)['left']); leftrocketmeluncur = leftrocketmeluncur < swrocketmeluncur ? leftrocketmeluncur * 2 - swrocketmeluncur : leftrocketmeluncur; scrolltoprocketmeluncur.style.left = ( basewrocketmeluncur + leftrocketmeluncur ) + 'px'; } else { scrolltoprocketmeluncur.style.left = 'auto'; scrolltoprocketmeluncur.style.right = '10px'; } }) jQuery('#rocketmeluncur').click(function(){ jQuery("html, body").animate({ scrollTop: '0px',display:'none'},{ duration: 600, easing: 'linear' }); var self = this; this.className += ' '+"launchrocket"; setTimeout(function(){ self.className = 'showrocket'; },800) });

      Ficaria inteiramente grato se alguém pudesse me ajudar nessa.
      Um forte abraço a toda comunidade.


       
    • Por Sapinn
      Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso???
    • Por FabianoSouza
      Pessoal, tenho uma modal cuja altura é variável.
      Aí preciso que, caso a modal atinja altura maior do que a tela, apareça a barra de rolagem vertical NA JANELA MÃE, não na DIV que que mostra o conteúdo.
      Igual ao Trello (vejam a imagem).

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.