Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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






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

×