Unwanted scroll effect

Navigation
1

I'm using the materialize tab , the switch works normally, but whenever I click on a tab it moves the page to the top , I do not know why, I think it has to do with the smooth scrolling 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><!--Smoothscrollingeffect--><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>
    
asked by anonymous 06.05.2018 / 03:50

3 answers

0

What was causing the problem was the initialization of the tabs 

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

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

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

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

    
06.05.2018 / 05:40
1

I did not understand the reason for the click event to be inside the scroll event, so I removed it (I commented with // ).

But you can solve the problem by getting the offset().top of the clicked element that contains the hash, like this: 

'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><!--Smoothscrollingeffect--><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>
    
06.05.2018 / 04:29
0

I just removed the instruction that flipped 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><!--Smoothscrollingeffect--><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>
    
06.05.2018 / 04:16
Build models in PHP or JAVASCRIPT? Multiplication Algorithm by sum to any integer