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

Asked

Viewed 128 times

0

When I click anywhere on the site, it makes the animation scrolling to the div #texto_position.

How to make so that only when you click on the element make 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

  • Dude, you put the event click on window, then you practically set the click on the whole window, you have to put in a specific element

  • Wagner, post your HTML to make it easier to help. But basically just put the tab element in place of html,body in animation but post your HTML for easy analysis.

  • is in the answer the html

2 answers

1

Wagner, you’re performing the event resize e click in the browser window, that is, whenever there is a click on the window, the event will be triggered. Add the code within a click event of the element you want clicked to perform 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’s 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>

  • did so but did not work $('#texto_position'). on('scroll', Function() {

  • 1

    In fact, you have to assign the click event to the element you want to trigger the event, as shown in my reply. Would look like this $('elemento').click(function(){ &#xA; //executa a ação de scroll })

  • 1

    Test the example I added in my reply.

1


You need to separate the events, and not put everything nestled. Create an event click only for the .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");
});

  • thus, you are not adding the css class here when you click on the $(window) tab. on("resize",Function(){ $('html, body'). (stop); var tabs = $(this). width() <= 800 ? " #texto_position" : ". tabs"; $('html, body'). Animate({scrollTop: $(tabs). offset(). top}, 300); $("#texto_position"). addClass("classecss"); });

  • When you click on the tab?

  • If that’s when I click on the tab, I refreshed the answer. Just add $("#texto_posicao").addClass("classecss"); in onclick.

Browser other questions tagged jquery

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