Soft anchor inside a DIV

Question

Soft anchor inside a DIV

Navigation

#1 by (1 votes)

0

I have a OnePage page, with the menu fixed at the top. I've already been able to make the menu links, when clicked, roll smoothly across the page. My difficulty is to do the same thing inside a DIV that has OVERFLOW: HIDDEN. This is a menu on which, by clicking on "SWEET PIZZA" (for example) is directed to the link, appearing inside the DIV. To be clearer, I want to do the same thing on the GLOBO ESPORTE website (at this link link ), in area "ELENCO". Here is the image:

Could you please help me? Thank you.

html jquery css

asked by anonymous 09.01.2017 / 00:18

1 answer

delphi events OnkeyDown and OnExit Error in return of get from delphi to php

score 1 · Answer 1

An example of a smooth scrolling with jQuery. From what I could understand that's what you need. You will need to adapt this example in your code, since you did not provide 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><ahref="#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>