如何在使用“显示和隐藏”锚标签时防止页面滚动？

Question

I am using show and hide anchor tag for some data. But every time I click on show or Hide tag the page go back to top and I have to scroll down to see the details. How to prevent this please guide me. I am using javascript function to show and hide the details.

<script type="text/javascript">
$(document).ready(function () {
    $(".productDescription").hide();
    $(".show_hide").show();
    $(".hide_show").hide();
    $('.show_hide').click(function () {
        $(this).parent().find('.productDescription').slideToggle();
        $(this).parent().find(".show_hide").hide();
        $(this).parent().find(".hide_show").show();
    });
    $('.hide_show').click(function () {
        $(this).parent().find('.productDescription').slideToggle();
        $(this).parent().find(".show_hide").show();
        $(this).parent().find(".hide_show").hide();
    });
});
</script>

and this is my aspx page

<div class="product clearfix"> <a href="#" class="show_hide" style="color: #FF0000" id="FD">Full Description</a>
    <br /> <a href="#" class="hide_show" style="color: #FF0000" id="HFD">Hide Full Description</a>
    <div class="productDescription">
        <p>
            <asp:Label ID="im_url" runat="server" Text='<%# Eval("description") %>'></asp:Label>
        </p>
    </div>
</div>

Answer 1

You have to use preventDefault (preventing native behavior) method, like this:

$('.show_hide').click(function (ev) {
    ev.preventDefault();
    // Your code goes here
})

Answer 2

Can you try adding preventDefault like this? Since there is # for href of the anchor tag, # is getting appended to url and performing default behavior of anchor tag.

$('.show_hide').click(function (evt) {
  evt.preventDefault();
  $(this).parent().find('.productDescription').slideToggle();
  $(this).parent().find(".show_hide").hide();
  $(this).parent().find(".hide_show").show();
});