Effect of unwanted scroll

Question

I’m using the tab of the materialize, the switch works normally, but every time I click on a tab moves the page to the top, I don’t know why, I believe it has to do with the smooth scroll effect, but I’m not sure

<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" media="screen,projection">


<div style='margin-top: 500px' id='tudo' class="col s12">
  <ul class="tabs">
    <li class="tab col s4"><a class='active' href="#minhas">Minhas</a></li>
    <li class="tab col s4"><a href="#favoritas">Favoritas</a></li>
    <li class="tab col s4"><a href="#publicas">Públicas</a></li>
  </ul>

  <!-- LISTA DE MINHAS -->
  <div class="row" id="minhas"></div>

  <!-- LISTA FAVORITAS -->
  <div class="row" id="favoritas"></div>

  <!-- LISTA PÚBLICAS -->
  <div class="row" id="publicas"></div>
</div>

<footer>
  <!-- Import JQuery.js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Smooth scrolling effect -->
  <script>
    $(document).scroll(function() {
      $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
          'scrollTop': $target.offset().top
        }, 900, 'swing');
      });
    });
    $(document).ready(function() {
      $('.tabs').tabs();
    });
  </script>

  <!-- Import materialize.js-->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</footer>

Answer 1

I don’t understand the reason for the event click be inside the event scroll, so I removed (I left commented with //).

But you can solve the problem by taking the offset().top of the clicked element containing the hash, thus:

'scrollTop': $(this).offset().top

See the code:

<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" media="screen,projection">


<div style='margin-top: 500px' id='tudo' class="col s12">
  <ul class="tabs">
    <li class="tab col s4"><a class='active' href="#minhas">Minhas</a></li>
    <li class="tab col s4"><a href="#favoritas">Favoritas</a></li>
    <li class="tab col s4"><a href="#publicas">Públicas</a></li>
  </ul>

  <!-- LISTA DE MINHAS -->
  <div class="row" id="minhas">minhas</div>

  <!-- LISTA FAVORITAS -->
  <div class="row" id="favoritas">favs</div>

  <!-- LISTA PÚBLICAS -->
  <div class="row" id="publicas">pubs</div>
</div>

<footer>
  <!-- Import JQuery.js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Smooth scrolling effect -->
  <script>
//    $(document).scroll(function() {
      $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();

        $('html, body').stop().animate({
          'scrollTop': $(this).offset().top
        }, 900, 'swing');
//      });
    });
    $(document).ready(function() {
      $('.tabs').tabs();
    });
  </script>

  <!-- Import materialize.js-->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</footer>

Answer 2

I just removed the instruction that threw the page up and it looks like it worked. Try to do this.

<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" media="screen,projection">


<div style='margin-top: 500px' id='tudo' class="col s12">
  <ul class="tabs">
    <li class="tab col s4"><a class='active' href="#minhas">Minhas</a></li>
    <li class="tab col s4"><a href="#favoritas">Favoritas</a></li>
    <li class="tab col s4"><a href="#publicas">Públicas</a></li>
  </ul>

  <!-- LISTA DE MINHAS -->
  <div class="row" id="minhas"></div>

  <!-- LISTA FAVORITAS -->
  <div class="row" id="favoritas"></div>

  <!-- LISTA PÚBLICAS -->
  <div class="row" id="publicas"></div>
</div>

<footer>
  <!-- Import JQuery.js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Smooth scrolling effect -->
  <script>
    $(document).scroll(function() {
      $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        // Removi a linha que vinha aqui
      });
    });
    $(document).ready(function() {
      $('.tabs').tabs();
    });
  </script>

  <!-- Import materialize.js-->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</footer>

Answer 3

What was causing the problem was the tabs initialization

$('.tabs').tabs();

I was able to solve the problem by adding a class to the links that are not part of the tabs and changing the smooth scroll effect selector to

$('a[href^="#"].link')...

So the effect is only called on the links that have the class link