Javascript滚动<textarea>内容回到顶部

时间:2017-12-24 06:44:47

标签: javascript jquery html

&lt; p&gt;我想要更改以下代码,以便按下按钮时,它会从下到上滚动文本区域内容。&lt; / p&gt; &lt; p&gt;&lt; div class =&#34; snippet&#34;数据琅=&#34; JS&#34;数据隐藏=&#34;假&#34;数据的控制台=&#34;真&#34;数据巴贝尔=&#34;假&#34;&GT;&#13; &lt; div class =&#34; snippet-code&#34;&gt;&#13; &lt; pre class =&#34; snippet-code-js lang-js prettyprint-override&#34;&gt;&lt; code&gt; $(&#34; button&#34;)。on(&#34; click&#34 ;,function(){&#13;   $(document).ready(function(){&#13;     var $ textarea = $(&#39;#update&#39;);&#13;     $ textarea.scrollTop($ textarea的[0] .scrollHeight);&#13;   });&#13; });&LT; /代码&GT;&LT; /预&GT;&#13; &lt; pre class =&#34; snippet-code-html lang-html prettyprint-override&#34;&gt;&lt; code&gt;&lt; script src =&#34; https://ajax.googleapis.com/ajax/库/ jquery的/ 2.1.1 / jquery.min.js&#34;&GT;&LT; /脚本&GT;&#13; &LT;按钮&GT;滚动&LT; /按钮&GT;&#13; &lt; textarea Name =&#34;更新&#34; ID =&#34;更新&#34; COLS =&#34; 50&#34;行=&#34; 25&#34;&GT;&LT; / textarea的&GT;&LT; /代码&GT;&LT; /预&GT;&#13; &LT; / DIV&GT;&#13; &LT; / DIV&GT;&#13; &LT; / p为H.

4 个答案:

答案 0 :(得分:7)

将以下行$textarea.scrollTop($textarea[0].scrollHeight);更改为$textarea.scrollTop(0);以滚动到textarea的顶部。

$("button").on("click", function() {
    var $textarea = $('#update');
    $textarea.scrollTop(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Scroll</button>
<textarea Name="update" Id="update" cols="50" rows="25"></textarea>

答案 1 :(得分:0)

试试这个javascript代码。将top和left设置为0并将textarea从底部滚动到顶部。

&#13;
&#13;
function scrolltop() {
  var scr_top = document.getElementById("update");
  scr_top.scrollLeft = 0;
  scr_top.scrollTop = 0;
}
&#13;
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <button onclick="scrolltop()">Scroll</button>
  <textarea name="update" id="update" cols="50" rows="25"></textarea>
</body>

</html>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这里有两个问题:

    在使用JQuery之前,应在外部作用域上检查
  1. document.ready
  2. 用于向上滚动到元素顶部,滚动值应为0
  3. 因此:

      $(document).ready(function() {
        $("button").on("click", function() {
            var $textarea = $('#update');
            $textarea.scrollTop(0);
        });
      });
    

答案 3 :(得分:0)

这是完整的代码。

点击按钮,内容将导航到标签内容的底部和/或顶部

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="last">Scroll to bottom</button>
<textarea Name="update" Id="update" cols="50" rows="25"></textarea>

<script>
$(document).ready(function() {
  $("#last").on("click", function() {
    var $textarea = $('#update');
    $textarea.scrollTop($textarea[0].scrollHeight);
  });
});
</script>

<button id="first">Move to Top</button>

<script>
$(document).ready(function() {
  $("#first").on("click", function() {
    var $textarea = $('#update');
    $textarea.scrollTop(0);
  });
});
</script>