javascript - jQuery scrollTop 不适用于 CSS 视差？-6ren

javascript - jQuery scrollTop 不适用于 CSS 视差？

转载作者：行者123 更新时间：2023-11-29 18:03:42

25

4

我一直在制作一个使用视差的网站，其使用方式与 http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/ 中的使用方式非常相似。，并且我一直在尝试实现一些 jquery，这将使页面在页面加载时自动滚动到底部。但是，我使用的命令根本不会移动滚动条。我已经在静态网站上试过了，它似乎工作正常。

$(document).ready(function() {
  $("html, body").animate({
      scrollTop: $(document).height()
    }, 2000);
  return false;
});

我的代码(去掉文本)如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
  .email a {
    color: #001F67;
    text-decoration: none;
  }

  a {
    text-decoration: none;
  }

  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: Black;
    font-size: 6vmin;
  }

  .About {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #001F67;
    text-decoration: none;
    font-size: 4vmin;
    background-color: white;
  }

  .parallax {
    height: 500px; 
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 500px; 
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-550px) scale(3);
    z-index: 3;
  }

  .parallax__group {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
  }

  body, html {
    overflow: hidden;
  }

  body {
    font: 100% / 1.5 Arvo;
  }

  * {
    margin:0;
    padding:0;
  }

  .parallax {
    font-size: 200%;
  }

  #group2 {
    z-index: 3;
  }

  #group2 .parallax__layer--back {
    background: #FFFFFF;
  }

  #group3 {
    z-index: 4;
  }

  #group3 .parallax__layer--base {
    /*background: black;*/
  }
</style>
<script>
$(document).ready(function() {
  $("html, body").animate({
      scrollTop: $(document).height()
    }, 2000);
  return false;
});
</script>
</head>
<body>
  <div class="parallax">
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div class="title"><strong>Example Text</strong></div>
      </div>
    </div>
    <div id="group3" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore">
        <div class="About">
          <!-- design inspired by graham hicks -->
          <p>
            Example Text
          <p>
            Example Text
          </p>
          <p class = "email">
            <br /> Example Text 
          </p>
        </div>
      </div>
      <div class="parallax__layer parallax__layer--base">
      </div>
    </div>
  </div>
</body>
</html>

有人知道为什么这不起作用吗？

最佳答案

将 $("html, body") 更改为 $(".parallax") 以使其正常工作。

$(document).ready(function() {
  $(".parallax").animate({
      scrollTop: $(document).height()
    }, 2000);
  return false;
});

JSFiddle:https://jsfiddle.net/qs0vbbtx/

关于javascript - jQuery scrollTop 不适用于 CSS 视差？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33028228/

25

4

0

文章推荐： java - 从android程序写入本地主机phpmyadmin

文章推荐： mysql - 代表同一 ID 检索数据时遇到错误

文章推荐： android - LibGdx 没有在 float 空间中正确绘制圆圈

javascript - body.scrollTop 在严格模式下已弃用。如果处于严格模式，请使用 'documentElement.scrollTop'，仅当处于 quirks 模式时，请使用 'body.scrollTop'。
我收到错误: body.scrollTop 在严格模式下已弃用。请在严格模式下使用“documentElement.scrollTop”，在怪异模式下使用“body.scrollTop”。我的代码是
javascript - $(window).scrollTop() 与 $(document).scrollTop()
两者有什么区别: $(window).scrollTop() 和 $(document).scrollTop() 谢谢。最佳答案它们都有相同的效果。但是，正如评论中所指出的: $(window)
jquery - $ ('body,html' ).scrollTop(); 之间的区别和 $(window).scrollTop();
我不太明白这一点，因为有时 body,html 有效，有时 window.我已经用 jQuery 完成了 2 个网页(本地)；在第一个主体中，html 可以工作，而在另一个主体中则不行，所以我编写了
javascript - 导航到页面，scrollTop() 始终有效。刷新页面，scrollTop()永远不起作用
我遇到了一个仅在 Safari 中发生的问题。我有一个特定的 div，我试图在页面加载后自动滚动到特定位置。如果我在 Safari 中输入页面的 URL 并按 Enter 键，则 div 无法正常滚
jquery - document.body.scrollTop || document.documentElement.scrollTop javascript
我有这段代码，我想在 div 而不是正文上滚动 var scrollPosition = document.body.scrollTop || document.documentElement.scr
jquery - 动画 scrollTop 但我不能使用 $ ('html,body' ).animate({scrollTop : 0}, 'slow' );
我是 jQuery 的新手，所以请不要介意我。我有这个风格 html, body{ height: 100%; overflow: auto; } 还有这个脚本 $(document
javascript - (doc && doc.scrollTop || body && body.scrollTop || 0) 返回 'Window' 对象
我只想获取文档的滚动条并使用此 answer 中的代码.但我得到的是一个“窗口”对象。我已经用 IE 10、Chrome 和 Firefox 进行了测试。这是我的代码: var doc = d
javascript - body.scrollTop vs documentElement.scrollTop vs window.pageYOffset vs window.scrollY
当试图找出网页从顶部滚动了多少时，应该使用以下哪一个: document.body.scrollTop, document.documentElement.scrollTop, window.page
jQuery scrollTop 不适用于查询字符串链接
我有一个导航，初始网址如下所示: test.php?query=19 我的页面上有像这样的链接 Section 1Section 2Section 3 分为 3 个部分: 并且我正在使用此 jque
jQuery - 没有动画的 ScrollTop
如何在没有动画的情况下使用滚动顶部此代码有效: var offTop = $('#box').offset().top; offTop = offTop-43; $('#mainCt').anim
javascript - scrollTop 检查用户是否滚动到某个元素
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
javascript - scrollTop 获取每个像素
当我使用函数scrollTop 获取顶部的像素数时，我收到的像素数为1、4、20...，具体取决于我滚动的速度。 $(window).scroll(function(){ var positi
javascript - Scrolltop()(无法反转动画)
嘿，我试图通过向左移动 10% 和向右移动 10% 来让 2 个 div 相互移开。在 1000 点之后它们会相互移开，但在我向后滚动到 1000 点之前它们不会再移回来 $(document).re
javascript - ...scrollTop($(这个)...)
我有一些带有 .class 类的 div，其滚动位置由其父级的另一个子级定义，因此我需要分配一个 scrollTop () 与 $(this)，类似 $(".class").scrollTop($(t
Javascript ScrollTop 效果不起作用
我在使用 ScrollTop 效果时遇到一些困难。事实上，它不起作用，我也不明白为什么。这是我的代码的 Javascript 部分: $('.hcb_link').click(function(){
javascript - scrollTop 似乎不正确
我想将自定义滚动写入部分功能。当我加载页面并向下滚动时，它应该向下滚动窗口的高度，这很好。然后，如果再次向下滚动，我想检查页面是否滚动超过窗口高度(如果向下滚动，则应该是)，但它似乎卡在第一次滚动
Javascript ScrollTop 函数帮助
我得到了下面的函数，该函数会弹出一个窗口，但无法将主页滚动到适当的 div 高度。 function open_window(getDiv) { var objDiv = document.getEl
JQuery .scrollTop() 计算的长时间延迟
我编写了这段代码来计算到页面顶部的距离。根据距离是否为 0，它会使图像消失/出现，并向上/向下移动辅助图像。 $(window).scroll(function(){ if ($(this).
jquery - ScrollTop() 不工作
我正在努力让scrolltop()返回一个值。现在它只给出 0。我知道这是一个简单的问题，但有人有任何建议吗？这是 JQuery: $(document).ready(function(){ $('
jQuery scrolltop - 第一次使用后不起作用
我在此菜单上使用 jQuery 滚动顶部功能:http://goethesternfriseure.de/index.php 问题是滚动功能仅在第一次起作用。第二次点击链接后，它会滚动到底部。 $('

首页

博学

6Ren·AI

商城

javascript - jQuery scrollTop 不适用于 CSS 视差？