CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Peky27
Peky27

Reputation: 101

JavaScript .toggle - vertical scrollbar goes up?

I have this function:

$(document).ready(function() {
  $("#toggle-area").click(function() {
    $("#show-area").toggle(300);
  });
});

It displays some text when user click on the link. The problem is I have 12 links, one below the other, and the vertical scrollbar appears. However, when I scroll down and click on the 12th link (for example), my scrollbar jumps on the top of the page and I have to scroll down until the end to see the text that appeared.

How do I avoid this jump, and keep my list where it was before the click?

Here is the link - JSFiddle

Thanks in advance.

Upvotes: 4

Views: 278

Answers (1)

JimboSlice
JimboSlice

Reputation: 692

You could use preventDefault to skip the default hyperlink behaviour.
suppose #toggle-area are a hyperlink element.

$(document).ready(function() {
$("#toggle-area").click(function(e) {
    $("#show-area").toggle(300);
    e.preventDefault();
  });
});

Upvotes: 2

Related Questions