3

O seguinte JS tem o intuito de promover a rolagem suave quando clicamos em âncoras em um site one-page. Há como restringir a atuação do mesmo somente com a resoluções superiores a 760px?

$(document).ready(function () {
    function filterPath(string) {
        return string
            .replace(/^\//, '')
            .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
            .replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname)
                && location.hostname == this.hostname
                && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function () {
                    $('html, body').animate({scrollTop: targetOffset}, 300);
                    return false;
                });
            }
        }
    });
});
1
  • Desculpe a ignorância, quando você diz resolução está se referindo a window.screen.availHeight window.screen.availWidth ? Commented 24/02/2015 às 19:56

1 Resposta 1

4

Basta alterar esse trecho do seu código:

$(this).click(function () {
   if($(window).width() > 760){
      $('html, body').animate({scrollTop: targetOffset}, 300);
      return false;
   }
});

Exemplo Precisei colocar o código no JSFiddle porque não funciona como deveria no snippet do StackOverflow. Para reproduzir, basta diminuir o quadro de result para um tamanho < 200.

1
  • Obrigado pela dica Renan. Não tava sabendo onde aplicar essa regra pro código efetuar só superior a 760px.
    – Anderson
    Commented 24/02/2015 às 20:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .