Question

我一直在做一个小项目一两天。代码如下。

<!DOCTYPE html>
<html>
<head>
<script>

function search() 
{
document.getElementById("text1").value


window.location.hash = "myVariable";
}
</script>

</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>


<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>

</body>
</html>

现在你可能想知道我想用这段代码完成什么？好吧，我想在文本框中输入一个值，然后它会跳转到该部分（该部分是文本框中的值）。它有点像搜索引擎，但事实并非如此。

例如，该部分是的。当用户在文本框中输入是的时，它应该跳到yeah部分。相反没有任何反应尽管在互联网上看到我还没有找到满足我需求的答案，所以我请您解释一下我的问题是什么，并可能给我一个解决问题的方法。

我正在使用Mozilla Firefox网络浏览器（如果需要该信息）。

Answer 1

试试这个：

function search() 
{
  var elID= document.getElementById("text1").value;
  var el = document.getElementById(elID);

  el.scrollIntoView(true);
}

元素 .scrollIntoView()方法将元素滚动到视图

<强> Online Demo

Answer 2

Dalorzo应该可以工作，但是如果你计划添加的不仅仅是这个函数，jQuery可能是比原始javascript更好的选择。

Here's a fiddle你正在尝试做什么。

$("#button1").click(function() {
    var t = $("#text1").val();

    alert(t);

    $('html, body').animate({
        scrollTop: $("#"+t).offset().top
    }, 2000);
});

Javascript文本框变量

2 个答案: