Questions with anchor link

Question

I created a script as follows:

<script>
$(function() {
  $('#mostrar_planos').bind('click',function(event){
    var $anchor = $(this);
    $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 500,'swing');
  });
});
</script>

<a href="#mostrar_planos" id="mostrar_planos">Confira os planos</a>

<section id="mostrar_planos"> conteudo </section>

It works normally, but does not leave the ID that was called, in case the section, at the top of the screen.

It sits in the middle of the screen. Is there any way to adjust it?

I need when you click on the link, it swipe the page and leave this section at the top of the page, not in the middle.

Answer 1

Dude your problem is that you are using the same link ID you’re using in the content you want to go to.

Note that your content does not have a ID equal, repeated, with the same name as ID of the link: id="mostrar_planos" Just take the ID from the link that solves.

<a href="#mostrar_planos" id="mostrar_planos">Confira os planos</a>

<section id="mostrar_planos"> conteudo </section>

OBS: If there is no content left below the element you anchor the screen will stop rising. Look at the code below, I placed an offset for the contents for the top 50px, and below it a div with 500px height. If you test in a small window it looks right. But if the window is more than 500px high the element does not rise anymore. Soon if in your case there is nothing else below the anchored element it goes to before the top.

See working.

$('a.teste').on('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('href'),
    targetOffset = $(id).offset().top;


    $('html, body').animate({ 
    scrollTop: targetOffset - 50 //altura que para antes do topo da tela
    }, 500,'swing');
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<a class="teste" title="segmentos" href="#mostrar_planos">Confira os planos</a>
        
<DIV style="height: 200vh;"></DIV>

<section id="mostrar_planos"> conteudo </section>

<DIV style="height: 500px; background:tomato;"> div com 500px de altura</DIV>