0

我有一个网页（使用 HTML、CSS、JavaScript、PHP）并想编写一些脚本来将我的页面滚动到其中的一个元素。

这很好用（当我单击按钮时，页面滚动到search_cont元素视图：

<!DOCTYPE html>
<html>
<head>
  <?php  include_once('head.php'); ?>
</head>
<body>
  <button onclick="myFunction()" id="scroll">Scroll</button>
  <script>
    function myFunction() {
      var elmnt = document.getElementById("search_cont");
      elmnt.scrollIntoView();
    }
  </script>
</body>
</html>

然而，这东西并没有做任何事情：

<!DOCTYPE html>
<html>
<head>
  <?php  include_once('head.php'); ?>
</head>
<body onload="myFunction()">
  <script>
    function myFunction() {
      var elmnt = document.getElementById("search_cont");
      elmnt.scrollIntoView();
    }
  </script>
</body>
</html>

我的问题是，为什么这不起作用，我该如何解决？或者（替代问题），如何以另一种方式滚动（在页面加载后）到页面上的某个元素？- 不使用（可见）按钮，我必须点击。

我将非常感谢您的回复。

4

1 回答 1

0

查看控制台的错误，似乎search_cont在您的 html 中找不到任何具有 id 的 DOM 元素。参考下面的例子：

function myFunction() {
  var elmnt = document.getElementById("search_cont");
  elmnt.scrollIntoView();
}
.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

#search_cont {
  border: 3px solid green;
}
<button onclick="myFunction()" class="button">Click Here to go </button>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>
<div id="search_cont">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries
</div>
<hr>

于 2018-07-22T12:31:25.867 回答