$(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?