Question

我有一个网页（使用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>

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

非常感谢您的答复。

Answer 1

查看控制台中的错误，似乎在HTML中没有找到ID为compile 'com.android.support:appcompat-v7:26.1.0' compile 'com.android.support:design:26.1.0'的DOM元素。请参考以下示例：

search_cont

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;
}

JavaScript scrollIntoView函数不起作用-页面无法滚动到元素视图

1 个答案: