Soft Scroll Bootstrap

Question

Soft Scroll Bootstrap

Navigation

#1 by (1 votes)

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>

Good evening,

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

html jquery css twitter-bootstrap

asked by anonymous 06.06.2018 / 00:31

1 answer

How do I define an element of a struct in C? [closed] How to clone Divs from a past number of Select?

score 1 · Accepted Answer

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

To not have to load the whole code of the plugin, you can choose only the effects that will use and erase from the code the others.

With the plugin loaded, you can use the .animate method of jQuery to scroll the screen 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><scriptsrc="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>