jQuery ScrollTo Gotcha »overflow: hidden

Um problema comum de scrollTo é ter overflow definido no elemento “html, body” em css. Raramente mencionado quando há problemas de rolagem / animação em elementos html / body e pode resultar em excesso de engenharia.

Se o overflow precisar ser definido, coloque-o apenas no elemento do corpo . Não ambos html, corpo.

Também é um bom hábito usar um atributo data- * no lugar de classes ou IDs em seu html. Isso adquire o hábito de separar os estilos do código. Considere isto para tornar sua vida mais fácil no futuro:

Criar função de rolagem reutilizável

scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        // if you need a callback function
    });
  }
}

Crie atributos de dados para elementos html (data-name é arbitrário e deve fazer sentido):

ADICIONAR LINK DE HTML

<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a> 

ADICIONAR ELEMENTO HTML

<div data-receiver="ScrollToMatch">Scrolls To This Element</div>

VERIFICAR CSS
»overflow adicionado a” html, body “não funcionará

body { overflow-x: hidden; }

INIT FUNCTION ON READY
»inicializar no documento pronto com seletor de nome de atributo para criar flexibilidade em várias chamadas

scrollioreceiver('[data-sender]');