javascriptjquerycsspage-jump

Don't want page jump


Previous problam solved @ use selectors in variable jquery on same coe

i have to made functionality like this this is using a big jquery code i didn't understand

and here is my jsfiddle i have make the same functionality but when it is clicked the page jumps to that element i dont want page to jump i need some fadein and out

$(".show").click(function() {
    var link = $('this').attr('href');
  $(link).show();

});

$(".close").click(function() {
  $(this).closest("div.popupbox").hide();
});

and html

<a href="#popup" id="show" class="show">a</a>
<a href="#popup1" id="show1" class="show">b</a>
<a href="#popup2" id="show2" class="show">c</a>

i want to show #popup on anchor click but dont want to page jump/scroll to that id i have given top:10000px in fiddle for testing this issue because in my original page it moves to particular element

full code on fiddle and i want this functionality


Solution

  • Try with this one:

    $(".show").click(function(e) {
      e.preventDefault();
      var link = $(this).attr('href'); //<----remove quotes in $('this')
      $(link).fadeIn(); // <-------------use fadeIn() instead
    });
    
    $(".close").click(function(e) {
      e.preventDefault();
      $(this).closest("div.popupbox").hide();
    });
    

    and adjust the top:100000px to something lesser one like 50px