Ir ao conteúdo
  • Cadastre-se
Mr. Phoenix

JQuery Dois scripts em conflito

Recommended Posts

Caros,

 

Estou com dois scripts que estão dando conflito um com o outro:

<!-- ROLAGEM SUAVE -->

<script>
	var $doc = $('html, body');
	$('a').click(function() {
		$doc.animate({
			scrollTop: $( $.attr(this, 'href') ).offset().top
		}, 500);
		return false;
	});
</script>

<!-- BOTÃO VOLTAR AO TOPO -->

<script>
	jQuery(document).ready(function() {
            // Exibe ou oculta o botão
            jQuery(window).scroll(function() {
            	if (jQuery(this).scrollTop() > 200) {
            		jQuery('.voltar-ao-topo').fadeIn(200);
            	} else {
            		jQuery('.voltar-ao-topo').fadeOut(200);
            	}
            });
            
            // Faz animação para subir
            jQuery('.voltar-ao-topo').click(function(event) {
            	event.preventDefault();
            	jQuery('html, body').animate({scrollTop: 0}, 300);
            })
        });
    </script>

O primeiro faz uma rolagem suave dos menus para as áreas de conteúdo (ancora), o segundo, faz com que o botão "voltar ao topo" apareça quando a página é rolada e faz uma transição suave para voltar ao topo.

 

O problema é que somente o "voltar ao topo" funciona corretamente, mas ao colocar o "rolagem suave" ele acaba dando conflito, a rolagem suave ocorre mas o voltar ao topo é feito de forma abrupta, retornando o seguinte erro na depuração:

 

Uncaught Error: Syntax error, unrecognized expression: #
    at Function.oe.error (jquery-3.3.1.min.js:2)
    at oe.tokenize (jquery-3.3.1.min.js:2)
    at oe.select (jquery-3.3.1.min.js:2)
    at Function.oe [as find] (jquery-3.3.1.min.js:2)
    at w.fn.init.find (jquery-3.3.1.min.js:2)
    at new w.fn.init (jquery-3.3.1.min.js:2)
    at w (jquery-3.3.1.min.js:2)
    at HTMLAnchorElement.<anonymous> (index.php:455)
    at HTMLAnchorElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLAnchorElement.y.handle (jquery-3.3.1.min.js:2)
oe.error @ jquery-3.3.1.min.js:2
oe.tokenize @ jquery-3.3.1.min.js:2
oe.select @ jquery-3.3.1.min.js:2
oe @ jquery-3.3.1.min.js:2
find @ jquery-3.3.1.min.js:2
w.fn.init @ jquery-3.3.1.min.js:2
w @ jquery-3.3.1.min.js:2
(anonymous) @ index.php:455
dispatch @ jquery-3.3.1.min.js:2
y.handle @ jquery-3.3.1.min.js:2

Eu gostaria de fazer com que os dois trabalhassem em conjunto, tanto a rolagem suave para baixo como a rolagem suave para cima, podem me ajudar?

 

Agradeço desde já!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Mr. Phoenix Veja se usando o  Noconflict  resolve o problema.

 

Caso não,

Tente este código:

 

$(document).ready(function(){
  
  $('.btn').hide();        
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
         $('.btn').fadeIn();
    }else {
        $('.btn').fadeOut();
    }
});          
            

$('.voltar-ao-topo').bind('click.smoothscroll',function (e) {
	    e.preventDefault();
	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 500, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

Aqui um exemplo do código acima funcionando: http://jsfiddle.net/fn2awpo8/23/

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 minutos atrás, DiF disse:

@Mr. Phoenix Veja se usando o  Noconflict  resolve o problema.

 

Caso não,

Tente este código:

 


$(document).ready(function(){
  
  $('.btn').hide();        
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
         $('.btn').fadeIn();
    }else {
        $('.btn').fadeOut();
    }
});          
            

$('.voltar-ao-topo').bind('click.smoothscroll',function (e) {
	    e.preventDefault();
	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 500, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

Aqui um exemplo do código acima funcionando: http://jsfiddle.net/fn2awpo8/23/

 

Muito obrigado, na verdade, acabei resolvendo usando uma "class" especifica para "rolagem suave" ao invés de usar para todos os links (a) do site, assim eu coloco apenas a class especifica para o link que desejo que tenha o Scroll Suave, ficou assim:

 

<!-- ROLAGEM SUAVE -->

<script>
	var $doc = $('html, body');
	$('.scroll-suave').click(function() {
		$doc.animate({
			scrollTop: $( $.attr(this, 'href') ).offset().top
		}, 500);
		return false;
	});
</script>

<!-- BOTÃO VOLTAR AO TOPO -->

<script>
	jQuery(document).ready(function() {
            // Exibe ou oculta o botão
            jQuery(window).scroll(function() {
            	if (jQuery(this).scrollTop() > 200) {
            		jQuery('.voltar-ao-topo').fadeIn(200);
            	} else {
            		jQuery('.voltar-ao-topo').fadeOut(200);
            	}
            });
            
            // Faz animação para subir
            jQuery('.voltar-ao-topo').click(function(event) {
            	event.preventDefault();
            	jQuery('html, body').animate({scrollTop: 0}, 300);
            })
        });
    </script>

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×