Javascript 为什么每篇文章后我的页面都会上升 var main=function（）{ $（'.btn'）。单击（函数（）{ var post=$（'.status box'）.val（）； $（“”）.text（post.prependTo（“.posts”）； $（'.status box'）.val（''）； $（'.counter'）.text（'140'）； $（'.btn'）.addClass（'disabled'）； }); $（'.status box'）.keyup（函数（）{ var postLength=$（this）.val（）.length； var charactersLeft=140-postLength； $（'.counter'）.text（charactersLeft）； if（charactersLeft

每次我发帖子的时候，我的页面都会一直在顶部。你知道为什么会发生这种情况吗？我有一个div，可以选择制作一篇140个字符的文章，将其放入列表并显示在页面上。每次我发布这些帖子时，网页都会上升到顶部，要查看帖子，您必须一直向下滚动。

最有可能的是，除了自定义事件逻辑之外，还会执行默认表单提交或链接跟踪行为。它可能正在导航到

#

或页面顶部附近的其他定位点。为了防止这种情况发生，需要改变

    var main = function(){
  $('.btn').click(function() {
     var post = $('.status-box').val();
     $('<li>').text(post).prependTo('.posts');
     $('.status-box').val('');
     $('.counter').text('140');
     $('.btn').addClass('disabled');
  });
  $('.status-box').keyup(function(){
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);
    if (charactersLeft < 0){
        $('.btn').addClass('disabled');
      }
      else if (charactersLeft == 140){
        $('.btn').addClass('disabled');
      }
      else {
        $('.btn').removeClass('disabled');
      }
  });
   $('.btn').addClass('disabled');
};

$(document).ready(main);

到

---

最可能的情况是，除了自定义事件逻辑之外，还执行默认表单提交或链接跟踪行为。它可能正在导航到

#

或页面顶部附近的其他定位点。为了防止这种情况发生，需要改变

    var main = function(){
  $('.btn').click(function() {
     var post = $('.status-box').val();
     $('<li>').text(post).prependTo('.posts');
     $('.status-box').val('');
     $('.counter').text('140');
     $('.btn').addClass('disabled');
  });
  $('.status-box').keyup(function(){
    var postLength = $(this).val().length;
    var charactersLeft = 140 - postLength;
    $('.counter').text(charactersLeft);
    if (charactersLeft < 0){
        $('.btn').addClass('disabled');
      }
      else if (charactersLeft == 140){
        $('.btn').addClass('disabled');
      }
      else {
        $('.btn').removeClass('disabled');
      }
  });
   $('.btn').addClass('disabled');
};

$(document).ready(main);

到

---

如果表单提交，页面将重新加载，对吗？更确切地说，

.btn

只是一个锚定标签-正如你在回答中所假设的那样。@NikolayErmakov取决于目标是什么。如果表单发布到

“#”

，那么它只会导航到页面顶部。我的猜测是这样的。是的，但是为什么你认为有一个表单呢？）我不确定页面是否重新加载，因为如果我按下web浏览器上的“重新加载”按钮，帖子历史记录将被清除，并且什么也不显示。但是，当我单击“发布”时，网页会跳到顶部，如果你向下滚动到帖子，你可以看到帖子。我想一个解决办法是将post按钮和post放在网页顶部，但我很好奇为什么会发生这种行为。@sizz-不要忘记通过单击答案旁边的复选标记来接受答案。）如果表单提交，页面将重新加载，对吗？更确切地说，

.btn

只是一个锚定标签-正如你在回答中所假设的那样。@NikolayErmakov取决于目标是什么。如果表单发布到

“#”

，那么它只会导航到页面顶部。我的猜测是这样的。是的，但是为什么你认为有一个表单呢？）我不确定页面是否重新加载，因为如果我按下web浏览器上的“重新加载”按钮，帖子历史记录将被清除，并且什么也不显示。但是，当我单击“发布”时，网页会跳到顶部，如果你向下滚动到帖子，你可以看到帖子。我想一个解决办法是将post按钮和post放在网页顶部，但我很好奇为什么会发生这种行为。@sizz-别忘了通过单击答案旁边的复选标记来接受答案。）你能提供一把小提琴吗？我试着用小提琴。我以前从未真正使用过它，但现在它在这里。小提琴似乎工作得很好哦，哈哈，我在下面做了@asah修复，它工作了！你能提供一把小提琴吗？我试着用小提琴。我以前从未真正使用过它，但现在它在这里。小提琴似乎工作得很好哦，哈哈，我在下面做了@asah修复，它工作了！

$('.btn').click(function(event) {
    event.preventDefault();
    ...