Question

我正在尝试使用jQuery在页面加载时将页面向下滚动100px。到目前为止，我有这个。.

jQuery(window).load(function() {

	window.scrollBy(0, 100);

});

body {
  background:lightgray;
}

h1, h2 {
  text-align:center;
}

.center {
  text-align:center;
  width:100%;
  object-fit:cover;
  height:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  Title
</h1>
<h2>
  Subtitle
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<img class="center" src="http://lorempixel.com/g/600/300/">
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
<img class="center" src="http://lorempixel.com/g/600/299/">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<img class="center" src="http://lorempixel.com/g/600/301/">
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>

我遇到脚本错误，有人可以看到原因吗？

Answer 1

jQuery的加载为different，window.onload为different

使用此代码

$(window).on("load", function() {

    window.scrollBy(0, 500);

});

$(window).on("load", function() {

	window.scrollBy(0, 500);

});

body {
  background:lightgray;
}

h1, h2 {
  text-align:center;
}

.center {
  text-align:center;
  width:100%;
  object-fit:cover;
  height:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  Title
</h1>
<h2>
  Subtitle
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<img class="center" src="http://lorempixel.com/g/600/300/">
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
<img class="center" src="http://lorempixel.com/g/600/299/">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<img class="center" src="http://lorempixel.com/g/600/301/">
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>

jQuery-页面加载时页面向下滚动100像素

1 个答案: