jQuery smoth scrolling is not working

Asked

Viewed 74 times

0

When I click once on one of the options of nav, it works, but if I double-click or if I’m in one area and click to go to another, it gets lost and Buga total, do not know what to do and I’ve tried to use all possible JS.

HTML:

<nav class="navbar navbar-fixed-top navbar-inverse navbar-transparente ">
      <div class="container">

        <!-- header -->
        <div class="navbar-header">

          <!-- botao toggle -->
          <button type="button" class="navbar-toggle collapsed"
                  data-toggle="collapse" data-target="#barra-navegacao">
            <span class="sr-only">alternar navegação</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a href="#conteudo-sobre" class="js-scroll-trigger">
            <img src="logopng.png" width="100" height="30" style="margin-top: 10px">
          </a>

        </div>

        <!-- navbar -->
        <div class="collapse navbar-collapse" id="barra-navegacao">
          <ul class="nav navbar-nav navbar-right">
            <li><a id="home" href="#conteudo-home">Home</a></li>
            <li><a id="sobre" href="#conteudo-sobre">Sobre</a></li>
            <li><a id="servicos" href="#conteudo-servicos">Serviços</a></li>
            <li><a id="contato" href="#conteudo-contato">Contato</a></li>
            <li class="divisor" role="separator"></li>
            <li><a id="msc" href="#conteudo-contato">Mande seu currículo</a></li>


          </ul>
        </div>
      </div><!-- /container -->
    </nav><!-- /nav -->

    <div class="capa " id="conteudo-home">

        <div class="texto-capa layer">
        <img src="logopng.png" width="450" height="150" >
        <h4><hr align="center" width="100" size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pha</h4>
        <a href="#conteudo-sobre" class="btn btn-custom btn-branco btn-lg">Saiba mais</a>

      </div>
    </div>

JQUERY:

$(document).ready(function(){
    setBindings();
});

function setBindings() {
    $("nav a").click(function(e){
       //e.preventDefault();

        e.preventDefault();

        var sectionID = "conteudo-" + e.currentTarget.id;


        $("html body").animate({
            scrollTop: $("#" + sectionID).offset().top
        }, 1000)

        //alert("-" + e.currentTarget.id);



   //    var sectionID = "conteudo-" e.currentTarget.id;

    //   alert(sectionID + "id");



/*
    $("html body").animate({
        scrollTop: $("#" + sectionID).offset().top

    },1000)

*/
    })

}
javascript jquery browser rolling

  • let’s say that it has a Home boot, about and contact, if I am in the home and I click on it goes down quietly, but if I click on it again it goes back home, this should not happen ,

  • and when I’m on and I click for contact, it just rolls up out of nowhere,

  • exactly!! but unfortunately I’m not getting anywhere at all

  • Sure, that would help me a lot

1 answer

0


You need to make some modifications to your code to make it work. Follow the steps below:

a) Remove the names of href, just let the #:

<li><a id="home" href="#">Home</a></li>
<li><a id="sobre" href="#">Sobre</a></li>
<li><a id="servicos" href="#">Serviços</a></li>
<li><a id="contato" href="#">Contato</a></li>
<li class="divisor" role="separator"></li>
<li><a id="contato" href="#">Mande seu currículo</a></li>

b) Remove this unnecessary function (do not erase what is inside it):

function setBindings() {...

Don’t forget to erase the key } that closes her.

c) Delete this too calling the above function:

$(document).ready(function(){
    setBindings();
});

d) Change this line:

var sectionID = "conteudo-" + e.currentTarget.id;

for

var sectionID = $(this).attr("id");

e) Change this:

$("html body").animate({
    scrollTop: $("#" + sectionID).offset().top
}, 1000)

for this reason:

$("html, body").animate({
   scrollTop: $("#conteudo-" + sectionID).offset().top
}, "slow");

With these changes your code should work.

$("nav a").click(function(e){

   e.preventDefault();

   var sectionID = $(this).attr("id");
   $("html, body").animate({
      scrollTop: $("#conteudo-" + sectionID).offset().top
   }, 1000);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-fixed-top navbar-inverse navbar-transparente ">
   <div class="container">
      <!-- header -->
      <div class="navbar-header">

         <!-- botao toggle -->
         <button type="button" class="navbar-toggle collapsed"
            data-toggle="collapse" data-target="#barra-navegacao">
            <span class="sr-only">alternar navegação</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>

         <a href="#conteudo-sobre" class="js-scroll-trigger">
            <img src="logopng.png" width="100" height="30" style="margin-top: 10px">
         </a>

      </div>

      <!-- navbar -->
      <div class="collapse navbar-collapse" id="barra-navegacao">
         <ul class="nav navbar-nav navbar-right">
            <li><a id="home" href="#">Home</a></li>
            <li><a id="sobre" href="#">Sobre</a></li>
            <li><a id="servicos" href="#">Serviços</a></li>
            <li><a id="contato" href="#">Contato</a></li>
            <li class="divisor" role="separator"></li>
            <li><a id="contato" href="#">Mande seu currículo</a></li>
         </ul>
      </div>
   </div><!-- /container -->
</nav><!-- /nav -->
<div class="capa " id="conteudo-home">
   <div class="texto-capa layer">
      <img src="logopng.png" width="450" height="150" >
      <h4><hr align="center" width="100" size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pha</h4>
      <a href="#conteudo-sobre" class="btn btn-custom btn-branco btn-lg">Saiba mais</a>
   </div>
</div>
<div class="capa " id="conteudo-sobre">
   sobre
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="capa " id="conteudo-servicos">
   servicos
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="capa " id="conteudo-contato">
   contato
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Browser other questions tagged javascript jquery browser rolling

You are not signed in. Login or sign up in order to post.