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

Question

I have a web page (using HTML, CSS, JavaScript, PHP) and want to write some script to scroll my page to one of elements on it. 我有一个网页（使用HTML，CSS，JavaScript，PHP），并且想要编写一些脚本来将页面滚动到其中的一个元素上。

This worked well (when I clicked on the button, the page scrolled into view of search_cont element: 效果很好（当我单击按钮时，页面滚动到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>

However, this thing did not do anything: 但是，这件事没有做任何事情：

<!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>

My question is, why this did not work, and how can I fix it? 我的问题是，为什么这不起作用，我该如何解决？ Or (alternative question), how can I scroll (right after the page is loaded) to some element on the page another way? 或（另一个问题），如何以另一种方式（在页面加载后）滚动到页面上的某个元素？ - without using the (visible) button I have to click on. -不使用（可见）按钮，我必须单击。

I'll be very grateful for your responds. 谢谢您的回复。

Answer 1

See the console for Error, it seems like there isn't any DOM element with id search_cont found in your html. 看到错误的控制台，似乎在html中找不到ID为search_cont任何DOM元素。 Refer to below example: 请参考以下示例：

 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>

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

问题描述

1 个解决方案

解决方案1
0 2018-07-22 12:31:25

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

问题描述

1 个解决方案

解决方案1 0 2018-07-22 12:31:25

解决方案1
0 2018-07-22 12:31:25