单击链接时阻止网页滚动到顶部

时间:2013-12-21 08:26:23

标签: javascript jquery html

我有链接附加到jquery,当我点击链接页面滚动回到顶部。

我如何防止这种情况发生。在fiddle中,您可以看到,如果向下滚动以查看7,然后单击,则页面会滚动回到顶部。

请帮忙。

HTML:

<ul class="leftlist">
                    <li itemage="" id="1013" class="todo"><a href="#" class="strike">           
                    <span class="cb check_box"></span>

        <p>Check One</p></a>           
                    </li><li itemage="" id="1014" class="todo"><a href="#" class="strike">           
                    <span class="cb check_box"></span>

        <p>Check two</p></a>           
                    </li><li itemage="" id="1018" class="todo"><a href="#">           
                    <span class="uncheck_box cb"></span>

        <p>Check 3</p></a>           
                    </li><li itemage="" id="1019" class="todo"><a href="#">           
                    <span class="uncheck_box cb"></span>

        <p>Check 4</p></a>           
                    </li><li itemage="" id="1024" class="todo"><a href="#">           
                    <span class="uncheck_box cb"></span>

        <p>Check 5</p></a>           
                    </li><li itemage="1" id="1021" class="todo"><a href="#">           
                    <span class="uncheck_box cb"></span>

        <p>Check 6</p></a>           
                    </li><li itemage="3" id="1025" class="todo"><a href="#">           
                    <span class="uncheck_box cb"></span>

        <p>Check 7</p></a>           

        </li></ul>

JAVASCRIPT:

(function($){
        $('li.todo').click(function(){
            if($(this).find('.uncheck_box').length >0){
                var _t=$(this).find('.uncheck_box');
                _t.removeClass('uncheck_box');
                _t.addClass('check_box');
                m_val='1';
                $(this).find('a').addClass('strike');
            }else{
                m_val='0';
                var _t=$(this).find('.check_box');
                _t.removeClass('check_box');
                _t.addClass('uncheck_box');
                $(this).find('a').removeClass('strike');
            }
        var m_key=jQuery(this).attr('id');
            jQuery.ajax({
              type: "POST",
              url: "<?php echo get_template_directory_uri(); ?>/ajax_get.php",
              data: { meta_key: m_key, meta_value: m_val},
               beforeSend: function(   ) {
                 //jQuery(this).attr("disabled", true);       
              },
              success:function(){}
            })
        });



    $('.sort').click(function(){
        var _t=$(this);
        $('.sort').removeClass('active');
        $(this).addClass('active');
        if(_t.hasClass('showall')){
            $('li.todo').show();
        }else if(_t.hasClass('complete')){
            $('li.todo').show();
            $('li.todo').filter(function(){
                return !!$(this).find('span.uncheck_box').length;
            }).hide();
        }else if(_t.hasClass('incomplete')){
            $('li.todo').show();
            $('li.todo').filter(function(){
                return !!$(this).find('span.check_box').length;
            }).hide();
        }

    });


    jQuery(document).ready(function(){ 
        jQuery('.chkbx').click(function(){

        var cuser_id='<?php echo $current_user->ID;?>';
        var m_val='0';
        if(jQuery(this).is(':checked'))
        {
            m_val='1';
            jQuery(this).parent().next("dd").addClass('strike');
        }else
        {
            m_val='0';
            jQuery(this).parent().next("dd").removeClass('strike');
        }
        var m_key=jQuery(this).attr('id');
            jQuery.ajax({
              type: "POST",
              url: "<?php echo get_template_directory_uri(); ?>/ajax_get/",
              data: { meta_key: m_key, meta_value: m_val},
               beforeSend: function(   ) {
                 jQuery(this).attr("disabled", true);         }
            })
              .done(function( msg ) {
              jQuery(this).attr("disabled", false);     
              });
        });
    });

2 个答案:

答案 0 :(得分:2)

这是由#中的<a href="#">替换为<a href="javascript:void(0);">

引起的

http://jsfiddle.net/8dF28/2/

答案 1 :(得分:1)

您可以使用此

<a href="javascript:;">Your content</a>