When inserted content into the div, the page does not scroll right

Question

When inserted content into the div, the page does not scroll right

Asked 5 years, 3 months ago

Viewed 53 times

-2

When inserted content into the div, the page does not scroll right, but without the content it was normal.

    var _AlturaDocumento = $(window).height();
    function AlturaSecao(){
    $('.secao').height(_AlturaDocumento);
    }
    
    
    function ScrollSecao(){
    console.log('entrou');
    var body = $('html, body');
    if($(this).parent('.secao').is('#secao01')){
    body.animate({scrollTop: _AlturaDocumento}, '500');
    } else if($(this).parent('.secao').is('#secao02')){
    body.animate({scrollTop: _AlturaDocumento*2}, '500');
    }else if($(this).parent('.secao').is('#secao03')){
    body.animate({scrollTop: _AlturaDocumento*3}, '500');
    }
    else if($(this).parent('.secao').is('#secao04')){
    body.animate({scrollTop: _AlturaDocumento*4}, '500');
    }else {
     body.animate({scrollTop: 0}, '800');
    }
    }
    
    $('.icone-scroll').click(ScrollSecao);
    
     
    $(AlturaSecao);

  <style>
      body{
      margin:0;
      padding:0;
      }
      
      p{
      position:absolute;
      top:80px;
      left:5px;
      }
      
      h1{
      position:absolute;
      top:10px;
      left:5px;
      }
      
      h2{
      position:absolute;
      top:10px;
      left:5px;
      }
      .secao{
      position:relative;
      }
      
      #secao01{
      background-color:#0B77C5;
      width: 100%;
    margin: 0;
    height: 180px;
    padding: 1px 0;
      }
      
      #secao02{
      background-color:#fff;
      width: 100%;
    margin: 0;
    height: 180px;
    padding: 1px 0;
      }
      
      #secao03{
      background-color:#000;
      color:#fff;
      width: 100%;
    margin: 0;
    height: auto;
    padding: 1px 0;
      }
      
      #secao04{
      background-color:#ccc;
      width: 100%;
    margin: 0;
    height: auto;
    padding: 1px 0;
      }
       #secao05{
      background-color:#FFF;
      width: 100%;
    margin: 0;
    height: auto;
    padding: 1px 0;
      }
      
     .icone-scroll{
      position:absolute;
      bottom:3em;
      width:50px;
      height:50px;
      background-color:#1a1a1a;
      border-radius: 50%;
      left:50%;
      margin-left:-25px;
      cursor:pointer;
      }
      
      .scroll{
      width:15px;
      height:15px;
      border-right: 2px solid #fff;
      border-bottom : 2px solid #fff;
      display:inline-block;
      position:relative;
      }
      
      .scroll-next{
      transform:rotate(45deg);
      margin:14px 0 0 16.5px;
      }
      
      .scroll-top{
      transform:rotate(225deg);
      margin:19px 0 0 17px;
      }
      
      .scroll-top + .scroll-top{
      top:-15px;
      margin-top:0;
      }
      </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--TESTE CLIQUE DIV -->
    
    <!DOCTYPE html>
    <html lang="pt-br">
      <head>
      <meta charset="utf-8">
      <title>CURRICULUM</title>
    <body>
      <div id="secao01" class="secao"> 
    <h1>
    <center><b>
    
    Nome Completo</b></center> </h1>
    <br>
    <p>
    
    	
    	RUA, Numero - Bairro<br> Cidade/Estado, Cep<br>
    CELULAR: 11980****** <br>
    E-MAIL: KINHO.***********@GMAIL.COM
      </p>  
      <span class="icone-scroll">
      
      <span class ="scroll-next scroll"> </span>
      </span>
      
      </div>
      
      
      <div id="secao02" class="secao">
      <h3>EDUCAÇÃO E FORMAÇÃO</h3>
      <p> 
      ANÁLISE E DESENVOLVIMENTO DE SISTEMAS - ANHANGUERA
             INÍCIO: JAN/2019 - TÉRMINO: JUN/2021<br>
    
    TÉCNICO EM INFORMÁTICA (PROGRAMAÇÃO) - INSTITUTO TÉCNICO DE BARUERI
              INÍCIO: JUL/2015 - TÉRMINO: JUL/2017<br>
    
    ENSINO MÉDIO COMPLETO (EJA) - E.E. MARIA ALICE CRISSIUMA MESQUITA
              TÉRMINO: DEZ/2014 </p>
      <span class="icone-scroll">
      <span class ="scroll-next scroll"> </span>
      </span>
      
      </div>
      
      
      <div id="secao03" class="secao"> 
      
      <h2>EXPERIÊNCIA PROFISSIONAL </h2>
       <p> 
      HIBERO EXTINTORES, CARAPICUÍBA - SP<br>
     CARGO: PINTOR<br>
     INÍCIO: SET/2011<br>
              TÉRMINO: MAI/2019 </p>
      <span class="icone-scroll">
      <span class ="scroll-next scroll"> </span>
      </span>
      </div>
      
      
      
      <div id="secao04" class="secao"> 
      
      <h2> QUALIFICAÇÕES E ATIVIDADES PROFISSIONAIS</h2>
    		  
    <p> C#, JAVA, HTML5, ASP.NET, ECLIPSE ANDROID, ORACLE SQL</p>
      <span class="icone-scroll">
      <span class ="scroll-next scroll"> </span>
      </span>
      </div>
      
      <div id="secao05" class="secao"> 
       <h2>OBJETIVO </h2>
      <p> ESTÁGIO/TRAINEE EM DESENVOLVIMENTO DE SISTEMAS </p>
      <span class="icone-scroll">
      <span class ="scroll-top scroll"> </span>
      </span>
      
      </div>
      
      
      </body>
      
    
      
 
    </html>

I edited your question for the code to be executable and saw no problem. Can Run it and be more specific in your problem?

– Leonardo Negrão

2019/06/19 at 13:57
Man but the way you’re calculating is not cool.... these _AlturaDocumento*1 or _AlturaDocumento*2... Who assures you that this account will actually match the size of the content? Section 2 may be 3* high, so your logic goes to bag... See other ways to do here https://answall.com/questions/90119/efeito-slider-em-links-anchors

– hugocsl

2019/06/19 at 14:04
I took an example of a website, so I thought I wouldn’t have this problem of adjusting to content.

– Marcus Vinicius

2019/06/20 at 04:09

1 answer

Browser other questions tagged jquery html5 css3

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

by Sam • **79,597** points · Answer 1 · 2019-06-19T16:35:24+00:00

You don’t need to take the height of window to do this. Just put it in the CSS, in the class .secao, the property height: 100vh; so that Divs always have window height.

.secao{
   position:relative;
   height: 100vh;
}

And remove all the height of id’s #secao01 to #secao05.

As for jQuery code, it’s very complicated when you can do it in a much simpler way, moving the scroll to the back div of the clicked icon, without having to do multiplication. See in the example that does not need much thing you put, just a if...else:

$(function(){

   function ScrollSecao(){
     // console.log('entrou');
      var body = $('html, body');
      
      var secao = $(this).parent(".secao").next().offset().top;
      
      if($(this).parent('.secao').is('#secao05')){
         body.animate({scrollTop: 0}, '800');
      }else {
         body.animate({scrollTop: secao}, '500');
      }
   }
   
   $('.icone-scroll').click(ScrollSecao);
   
});

body{
margin:0;
padding:0;
}

p{
position:absolute;
top:80px;
left:5px;
}

h1{
position:absolute;
top:10px;
left:5px;
}

h2{
position:absolute;
top:10px;
left:5px;
}
.secao{
position:relative;
height: 100vh;
}

#secao01{
background-color:#0B77C5;
width: 100%;
margin: 0;
padding: 1px 0;
}

#secao02{
background-color:#fff;
width: 100%;
margin: 0;
padding: 1px 0;
}

#secao03{
background-color:#000;
color:#fff;
width: 100%;
margin: 0;
padding: 1px 0;
}

#secao04{
background-color:#ccc;
width: 100%;
margin: 0;
padding: 1px 0;
}
 #secao05{
background-color:#FFF;
width: 100%;
margin: 0;
padding: 1px 0;
}

.icone-scroll{
position:absolute;
bottom:3em;
width:50px;
height:50px;
background-color:#1a1a1a;
border-radius: 50%;
left:50%;
margin-left:-25px;
cursor:pointer;
}

.scroll{
width:15px;
height:15px;
border-right: 2px solid #fff;
border-bottom : 2px solid #fff;
display:inline-block;
position:relative;
}

.scroll-next{
transform:rotate(45deg);
margin:14px 0 0 16.5px;
}

.scroll-top{
transform:rotate(225deg);
margin:19px 0 0 17px;
}

.scroll-top + .scroll-top{
top:-15px;
margin-top:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="secao01" class="secao"> 
    <h1>
    <center><b>
    
    Nome Completo</b></center> </h1>
    <br>
    <p>
    
    	
    	RUA, Numero - Bairro<br> Cidade/Estado, Cep<br>
    CELULAR: 11980****** <br>
    E-MAIL: KINHO.***********@GMAIL.COM
      </p>  
      <span class="icone-scroll">
      
      <span class ="scroll-next scroll"> </span>
      </span>
      
      </div>
      
      
      <div id="secao02" class="secao">
      <h3>EDUCAÇÃO E FORMAÇÃO</h3>
      <p> 
      ANÁLISE E DESENVOLVIMENTO DE SISTEMAS - ANHANGUERA
             INÍCIO: JAN/2019 - TÉRMINO: JUN/2021<br>
    
    TÉCNICO EM INFORMÁTICA (PROGRAMAÇÃO) - INSTITUTO TÉCNICO DE BARUERI
              INÍCIO: JUL/2015 - TÉRMINO: JUL/2017<br>
    
    ENSINO MÉDIO COMPLETO (EJA) - E.E. MARIA ALICE CRISSIUMA MESQUITA
              TÉRMINO: DEZ/2014 </p>
      <span class="icone-scroll">
      <span class ="scroll-next scroll"> </span>
      </span>
      
      </div>
      
      
      <div id="secao03" class="secao"> 
      
      <h2>EXPERIÊNCIA PROFISSIONAL </h2>
       <p> 
      HIBERO EXTINTORES, CARAPICUÍBA - SP<br>
     CARGO: PINTOR<br>
     INÍCIO: SET/2011<br>
              TÉRMINO: MAI/2019 </p>
      <span class="icone-scroll">
      <span class ="scroll-next scroll"> </span>
      </span>
      </div>
      
      
      
      <div id="secao04" class="secao"> 
      
      <h2> QUALIFICAÇÕES E ATIVIDADES PROFISSIONAIS</h2>
    		  
    <p> C#, JAVA, HTML5, ASP.NET, ECLIPSE ANDROID, ORACLE SQL</p>
      <span class="icone-scroll">
      <span class ="scroll-next scroll"> </span>
      </span>
      </div>
      
      <div id="secao05" class="secao"> 
       <h2>OBJETIVO </h2>
      <p> ESTÁGIO/TRAINEE EM DESENVOLVIMENTO DE SISTEMAS </p>
      <span class="icone-scroll">
      <span class ="scroll-top scroll"> </span>
      </span>
      
      </div>