Anchor locks with Parallax effect

Question

After adding the effect of Parallax, when clicking on any anchor it jumps normally to the point, but when trying to scroll on the page it is "coming back" at the point of anchorage, that is, it is "locked" at the point.

The Site is divided basically into two blocks, the first (back) and the second just below that has the effect of passing over the first (base). Follows the css

#site {
    perspective: 1px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax__layer--back {
    transform: translateZ(-2px) scale(3);} 

.parallax__layer--base {
    transform: translateZ(0);}

I would like to know how the anchors work, to set a height manually via JS.

Follows Html:

        <a name="home"></a>

        <!-- Topo -->

        <div class='nopad container-fluid parallax__layer parallax__layer--back'>

            <div id='imagem_inicio'></div>

            <div id='conteudo_inicio'>

                <nav class="navbar">
                    <div class="container-fluid">
                        <div class="navbar-header">                                
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1" style="border-style: none;">
                                <span class="icon-bar"></span>                                                  
                                <span class="icon-bar"></span>                                                  
                                <span class="icon-bar"></span>                                                  
                            </button>                                                       
                        </div>
                        <div class="texto_subtitulo collapse navbar-collapse" id="menu1">
                            <ul class="nav navbar-nav navbar-right barra1">
                                <li><a href="#home">HOME</a></li>
                                <li><a href="#sobre">SOBRE</a></li>
                                <li><a href="#produtos">PRODUTOS</a></li>
                                <li><a href="#contato">CONTATO</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <div id='logo'></div>

                <div id="letreiro" class="carousel slide" data-ride="carousel">                   

                    <div class="carousel-inner tamanho_banner" role="listbox">
                        <div class="item active">
                            <span>texto1.</span>                      
                        </div>
                        <div class="item">
                            <span>texto2.</span>
                        </div>
                        <div class="item">
                            <span>texto3.</span>
                        </div>
                    </div>  
                </div>
            </div>         
        </div>

         <div class="parallax__layer parallax__layer--base" >
            <div id='conteudo_site' style='background-color: white'>                                          

                <!-- Sobre -->

                <div class="container-fluid" style="margin-top: 100px;">

                    <a name="sobre"></a>     

                    <div class="row">
                        <div class="texto_titulo col-xs-12 col-xs-offset-0 col-sm-6 col-sm-offset-3 col-lg-6 col-lg-offset-3">
                            <p>Texto.</p>
                        </div>
                    </div>                                              
                </div>            
            </div>
         </div>

Follow also Jquery which gives the size of the image and the start content, maybe it is relevant.

 var h = window.innerHeight;
 $("#imagem_inicio, #conteudo_inicio").css("height", h);

Thanks in advance!

Answer 1

In summary, following the definition of w3c the element <a> (anchor) when it has an attribute href="" worthwhile #identificadorrefers to another element within the same document that has an attribute id or name with the referenced value id="identificador". W3C stresses that these attributes must have a unique value.

Effect "Heel" anchor:

After doing some tests, I identified that by jumping to the point where the identifier is, the scroll on the y-axis is set with the value from the top of the page to the element, which is identified by the method elementoHTML.offsetTop;.

I developed this function that apparently does the same thing as the attribute href="#identificador".

function anchorTo(elem) {
    var toElem = elem.getAttribute('anchor');
    var getTop = document.getElementById(toElem).offsetTop;
    window.scrollTo(0, getTop);
}

Summarizing: This function takes the value in the attribute Anchor(declaro manually) of the element that called it, value referring to the identifier of the element that will receive the jump, search the offsetTopand assigns to the y of scrollTo(x, y).

I hope I’ve made myself clear and I can help you, thank you.

See worked here on jsfiddle.

Reference: W3C - Anchors

Answer 2

Thank you very much for the information, you helped a lot!

The way this one didn’t work, it took the Y value but didn’t quite make the scroll. Putting as Animate worked perfectly and even gave the smooth anchor effect.

The Function was like this:

function anchorTo(elem) {
    var toElem = elem.getAttribute('anchor');
    var getTop = document.getElementById(toElem).offsetTop;
    $('#site').animate({scrollTop: getTop}, 700);    
}

Since "#site" is a div that covers all content, the problem was in the "window" that was not catching.