Don't want page jump

Question

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

well ... and your question is? This looks like a request to me ... and you didn't even ask please ... — henser, Mar 13 '13 at 11:31

score 3 · Accepted Answer · answered Mar 13 '13 at 11:40

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

Dipesh Parmar · Answer 2 · 2013-03-13T11:56:39.067

1

Use preventDefault()

$(".show").click(function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    $(link).show().animate(
    {
        scrollTop: $(link).offset().top
    },800);;

});

$(".close").click(function(e) {
  e.preventDefault();
  $(this).closest("div.popupbox").hide();
  $('body,html').animate(
    {
        scrollTop: 0
    }, 800);
});

edited Mar 13 '13 at 11:56

answered Mar 13 '13 at 11:32

Dipesh Parmar

27,090
8
61
90

its working but its stopped jumping scroll down you will see image – Dipesh Parmar Mar 13 '13 at 11:36
@SahilPopli i have updated my answer see if thats works for you – Dipesh Parmar Mar 13 '13 at 11:51

score 1 · Answer 3 · answered Mar 13 '13 at 11:33

1

$('#foo',function(event) {
    event.preventDefault();
});

answered Mar 13 '13 at 11:33

Imperative

3,138
2
25
40

Rohan Kumar · Answer 4 · 2013-03-13T11:41:30.233

1

Try event.preventDefault()

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

});

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

Docs http://api.jquery.com/event.preventDefault/

edited Mar 13 '13 at 11:41

answered Mar 13 '13 at 11:35

Rohan Kumar

40,431
11
76
106

can you edit it in fiddle its not working for me a same answer i also tested before – Sahil Popli Mar 13 '13 at 11:37

Don't want page jump

4 Answers4