1

$(document).ready(function() {
    $(".scroll").click(function(e){
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
   });
.menu{background:#ff0;}

.section-1{width:100%;height:100vh;background:#F86;}
.section-2{width:100%;height:100vh;background:#F56;}
.section-3{width:100%;height:100vh;background:#F40;}
<header class="container-top">
  <section class="container">
    <section class="row">
      <section class="col-lg-12">
        <nav class="menu col-lg-12">
          <ul>
            <li><a class="scroll" href="#box1">Seção 1</a></li>
            <li><a class="scroll" href="#box2">Seção 2</a></li>
            <li><a class="scroll" href="#box3">Seção 3</a></li>
           </ul>
        </nav>
      </section>
    </section>
  </section>
</header>
<section id="box1" class="section-1">
  <section class="container">
    <section class="row">
      <section class="col-lg-12">
        <h1> Seção 1</h1>
      </section>
    </section>
  </section>      
</section>
<section id="box2" class="section-2">
  <section class="container">
    <section class="row">
      <section class="col-lg-12">
        <h2> Seção 2</h2>
      </section>
    </section>
  </section> 
</section>
<section id="box3" class="section-3">
  <section class="container">
    <section class="row">
      <section class="col-lg-12">
        <h3> Seção 3</h3>
      </section>
    </section>
  </section> 
</section>

Boa noite,

Estou iniciando no Bootstrap e estou enfrentando alguns problemas, pois quando tento usar um efeito de Jquery que funciona perfeitamente em outros projetos(que não utilizo Bootstrap), funciona perfeitamente, porem esse mesmo efeito aplicado na estrutura do Bootstrap não esta funcionando. Gostaria de saber através da experiencia dos colegas se não é possível utiliza-lo esses efeitos somente com Jquery? Pois nesse momento estou enfrentando outro problema, estou tentando fazer com que o scroll desça suave quando clico em um link que tem uma ancoragem porem esse efeito não funciona de nenhuma forma. Vocês conhecem algum tutorial ou alguma forma com que eu consiga fazer o efeito de scroll suave?

0

1 Resposta 1

1

Você pode usar este plugin jQuery de efeitos easings. Possui cerca de 30 efeitos de transição.

Para não ter que carregar o código todo do plugin, você pode escolher apenas os efeitos que irá usar e apagar do código os outros.

Com o plugin carregado, você pode usar o método .animate do jQuery para rolar a tela até a âncora clicada.

No exemplo abaixo eu escolhi o efeito easeOutCirc:

// início do plugin
// insira aqui os créditos do autor do plugin
$.extend($.easing,
{
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    }
});
// fim do plugin


$("a").click(function(e){
   e.preventDefault();
   
   var anc = this.hash;
   
   $("html, body").animate({
      scrollTop: $(anc).offset().top
   }, { duration: 2000, easing: 'easeOutCirc'});
});
a, #ancora{
   display: block;
   height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<a href="#ancora">Clique aqui</a>
<div id="ancora">div com a âncora!</div>

1
  • dvd encontrei o problema que estava impedindo meu código de funcionar, através de sua ajuda com o seu código fiz alguns teste e notei que a chamada do jquery que vem com a estrutura do Bootstrap esta impedindo o efeito de animação de funcionar, eu troquei a chamada e funcionou, abaixo estou deixando o link que acompanha a estrutura Bootstrap que não funcionou a animação: <script src="code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    – Israel
    Commented 6/06/2018 às 0:05

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 .