Scroll Soft Bootstrap

Question

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

Good night,

I am starting in Bootstrap and I am facing some problems, because when I try to use a Jquery effect that works perfectly in other projects(that I don’t use Bootstrap), works perfectly, but this same effect applied in the Bootstrap structure is not working. I would like to know through the experience of colleagues if it is not possible to use it only with Jquery? Because right now I’m facing another problem, I’m trying to make the scroll go down smooth when I click on a link that has an anchorage but this effect does not work in any way. Do you know any tutorial or any way I can make the smooth scroll effect?

Answer 1

You can use this jQuery effect plugin easings. It has about 30 transition effects.

In order not to have to load the entire code of the plugin, you can choose only the effects that will use and erase the other code.

With the plugin loaded, you can use the method .animate from the jQuery to scroll the screen up to the clicked anchor.

In the example below I chose the effect 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>