页面跳跃，并在我显示ID元素后跳转到顶部

我有一个页面，一切正常，但一个问题是设置隐藏元素显示后，我的页面突然猛然升起。先前隐藏的元素确实显示，但我希望页面不要跳动。页面跳跃，并在我显示ID元素后跳转到顶部

这里是页：http://www.problemio.com/add_problem.php

当你添加任何第三输入区域，然后单击链接“添加类别”页面抽搐到顶部。如果向下滚动，您可以看到显示了一个先前隐藏的文本框，但是如何停止页面的跳动？

这里是我的jQuery代码：

$（ '＃add_category'）点击（函数（）{ // 警报（ “中添加类别”）; //现获得的价值文字输入方面 VAR类别= $（ “＃category_field”）VAL（）; //工作

 var text_area = $("#log").val();   
    //alert ("text_area: " + text_area); 

    // Should append to value of textarea what is in the category 
    if (text_area) 
    { 
     //alert ("text area NOT EMPTY: " + text_area + " and category: " + category); 
     text_area = text_area + " , " + category;  
    } 
    else 
    { 
     //alert ("text area EMPTY: " + text_area + " and category: " + category); 
     text_area = category;   
    }  

    // Now replace old text_area with new one 
    $("#log").val(text_area); 

    // Now reset the text field 
    $("#category_field").val(""); 

    // Make the categories box visible 
    document.getElementById("categories_box").style.display = 'block';

}）;

和这里是HTML形式：

document.getElementById("categories_box").style.display = 'block';

感谢：

  <form id="create_problem" name="form" method="post"> 
       <p> 
       <label for="problem_name">Problem Name: </label><input type="text" value="<?php echo $problem_name;?>" size="75" name="problem_name" id="problem_name"></input> 
       </p> 
       <p> 
       Explain the problem: 
       </p> 

     <textarea id="content" name="content" class="tinymce" style="width: 500px; height: 350px;"> 
     </textarea> 
     </p> 

    <p class="ui-widget"> 
     <label for="category_field">Category: </label> 
     <input id="category_field" size="25"/> <a id="add_category" href="#">Add Category</a> 
    </p> 

    <p id="categories_box" class="ui-widget" style="margin-top:2em; font-family:Arial; display: none;"> 
     Categories:<br /> 
     <textarea id="log" style="height: 150px; width: 500px;" ></textarea> 
    </p> 

     <span class="error" id="categories_error" style="display:none">Categories Can Not Be Empty</span> 
     <span class="success" id="categories_success" style="display:none">Categories Added Successfully!</span>  

       <input type="hidden" id="question_html" name="question_html" /> 

       <!-- Check if the person is logged in --> 
<!-- 
       <p> 
        <input class="problem_follow_checkbox" TYPE="checkbox" NAME="follow_problem" /> Follow this problem   
       </p> 
--> 



<span class="error" style="display:none"> Please Enter Valid Data</span> 
<span class="success" style="display:none"> Problem Added Successfully!</span> 

     <input type="submit" class="button" value="Add Problem"></input> 

<form>

具体而言是这样做是在jQuery的，它试图以显示像这样的元件的最后行的行！

来源

2011-11-01 Genadinik

这非常糟糕，但是如果使用jQuery，为什么不利用它的语法，只需使用'$（'＃categories_box'）。show（）;'而不是您正在使用的JavaScript方法？ – RobB

您需要返回false;在

$('#add_category').click(function() { 
    var text_area = $("#log").val();   
    //alert ("text_area: " + text_area); 

    // Should append to value of textarea what is in the category 
    if (text_area) 
    { 
     //alert ("text area NOT EMPTY: " + text_area + " and category: " + category); 
     text_area = text_area + " , " + category;  
    } 
    else 
    { 
     //alert ("text area EMPTY: " + text_area + " and category: " + category); 
     text_area = category;   
    }  

    // Now replace old text_area with new one 
    $("#log").val(text_area); 

    // Now reset the text field 
    $("#category_field").val(""); 

    // Make the categories box visible 
    document.getElementById("categories_box").style.display = 'block'; 

return false; 
});

不返回false塔最后行创建＃在页面的顶部;

来源

2011-11-01 14:22:40 Steve

谢谢你 - 工作。系统允许我在7分钟内接受答案。顺便说一下，使用return false的好习惯是什么？我应该在每个功能的底部做到这一点吗？ – Genadinik

只要你有＃作为url的锚标签，它可以防止跳跃... – Steve

这是因为链接的末尾有一个磅（一个不存在的标签的锚点，因此它会进入页面的顶部）。两种可能的选择是添加一个带有新类别框的标签作为锚点，以便它跳转到该标签（因此添加了类别框），或者在onclick事件结束时返回false， t注册。

来源

2011-11-01 14:26:25 abelito

页面跳跃，并在我显示ID元素后跳转到顶部

回答

相关问题