Soft anchor inside a DIV

Asked

Viewed 1,204 times

0

I have a Onepage page, with the fixed menu at the top. I have already managed to make the links in the menu, when clicked, roll smoothly through the page. My difficulty is to do the same thing inside a DIV that has OVERFLOW: HIDDEN. This is a menu menu in which, when clicking on "SWEET PIZZA" (for example) is directed to the link, appearing inside the DIV. To be clearer, I want to do the same as what is on the site of GLOBO ESPORTE (in this link http://globoesporte.globo.com/futebol/times/corinthians/), in the "CAST" area. Follow the image:

inserir a descrição da imagem aqui

Could you help me please? Thank you.

jquery html css
  • 2

    Want the page to scroll smoothly to an "anchor"?

1 answer

1

An example of smooth scrolling with jQuery. From what I can understand, this is what you need. It will be necessary to adapt this example in your code, since you have not provided it.

$(".suave").click(function(event){
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 1500);
});
.conteudo{
  background:#ff7777;
  }

.ancora{
 background:#77ff77; 
 }
 <head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head> 


<a href="#ancora">Rolagem normal</a><br>
<a href="#ancora" class="suave" >Rolagem suave</a>


<div class="conteudo">
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  [Conteúdo]<br/>
  </div>

  <div id="ancora" class="ancora">Rolar até aqui</div>

Browser other questions tagged jquery html css

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