How to perform scroll event only when clicking on a certain element?

Question

How to perform scroll event only when clicking on a certain element?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

When I click anywhere on the site, it does the scrolling animation for the #text_text_position.

How to make it so that only when you click on the element do the animation?

$(window).on("resize click",function(){
  $('html, body').stop();
   var abas = $(this).width() <= 800 ? "#texto_posicao" : ".abas";
   $('html, body').animate({scrollTop: $(abas).offset().top}, 300);
    $("#texto_posicao").addClass("classecss");

    var lastScrollTop = 0;
 $(window).on('scroll', function() {
    var st = $(this).scrollTop();
   if(st < lastScrollTop) {
     $("#texto_posicao").removeClass("classecss");
   }
   lastScrollTop = st;
 });


});

html

<div class="abas abas1" tabindex="1">

Planejamento Estratégico
</div>
<div class="abas abas2" tabindex="2">
   Mentoria Food Service
</div>
<div class="abas abas3" tabindex="3">
   Terceirização Financeira
</div>
<div class="abas abas4" tabindex="4">
   Marketing Full Time
</div>
<div class="abas abas5" tabindex="5">
   Mastermind
</div>
<br clear="all" /><br />

jquery

asked by anonymous 07.02.2018 / 14:23

2 answers

1

Wagner, you are holding the event resize e click in the browser window, that is, whenever the window is clicked, the event will be triggered. Add the code within a click event of the element that you want to be clicked to effect the animation.

$(window).on("resize",function(){
 $('seu-elemento').click(function(){
  $('html, body').stop();
   var abas = $(this).width() <= 800 ? "#texto_posicao" : ".abas";
   $('html, body').animate({scrollTop: $(abas).offset().top}, 300);
    $("#texto_posicao").addClass("classecss");
  }):
    var lastScrollTop = 0;
 $(window).on('scroll', function() {
    var st = $(this).scrollTop();
   if(st < lastScrollTop) {
     $("#texto_posicao").removeClass("classecss");
   }
   lastScrollTop = st;     
 });
});

Here is a simple example of how your event would work.

$(document).ready(function(){
 $('#elemento1').click(function(){
  $('html, body').animate({
        scrollTop: $("#elemento2").offset().top
        }, 1000);
 })
 
})

<div id="elemento1"> clique para descer<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><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><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><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><br><br><br><br><br><br><br><br>
<div id="elemento2"> Elemento alvo<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><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><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><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><br><br><br><br><br><br><br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

07.02.2018 / 14:30

PYTHON - how to use a loop without stopping the Tkinter working with decimal {5,2} rails

score 1 · Accepted Answer

You have to separate the events, and do not put everything nested. Create a click event only for .abas :

$(window).on("resize",function(){
   $('html, body').stop();
   var abas = $(this).width() <= 800 ? "#texto_posicao" : ".abas";
   $('html, body').animate({scrollTop: $(abas).offset().top}, 300);
   $("#texto_posicao").addClass("classecss");
});

var lastScrollTop = 0;

$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   if(st < lastScrollTop) {
      $("#texto_posicao").removeClass("classecss");
   }
   lastScrollTop = st;
});

$(".abas").on('click', function() {
   $('html, body').animate({scrollTop: $("#texto_posicao").offset().top}, 300);
   $("#texto_posicao").addClass("classecss");
});