CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ray
Ray

Reputation: 780

Prevent Auto scrolling down Jquery?

I have the following JQuery code

var o = true;
$('a#filter').click(function () {
    if(o){
        $('.heading').append('\
        <div id="fil">\
            <div class="row">\
                <div class="span12">\
                    <div class="content" style="padding-bottom:0;margin-top:0px; text-align:center; min-height:0px;background:-moz-linear-gradient(center top , #fafafa 0%, #e9e9e9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);">\
                        <?php echo '<a href="http://njace-cc.montclair.edu/admin/users/manage.php">All</a> ' . $letters; ?>\
                    </div>\
                </div>\
            </div>\
        </div>');

        o = false;
        $('#cls').html("▲");
    }
    else{
        $('.heading').children("#fil").remove();
        o = true;
        $('#cls').html("▼");
    }
});

Basically, it's about appending and removing a div. However, when I click on the link to append the div the pages scrolls down automatically. I know it happens because of the changing in page size, but how can I prevent that automatic scrolling down from happening.

Thanks.

Upvotes: 1

Views: 2849

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11293

The scroll is the default behavior of anchor links, in order to stop it you must either:

$('a#filter').click(function (event) {
  event.preventDefault();
  // your code
}):

Or return false at the end:

$('a#filter').click(function () {
  // your code
  return false;
}):

Upvotes: 3

Related Questions