javascript - jQuery 向下滚动按钮不起作用

标签 javascript jquery html css

我是 jQuery 的新手，我想知道为什么我的向下滚动按钮不起作用。我一直在查看几个论坛提要，但我似乎无法弄清楚如何让它发挥作用。在这里，我希望带有 id="this_button"的链接按钮能够平滑跳转到 id="group2"。

制作平滑滚动的脚本非常基础，已经看过多次，所以我不知道我做错了什么。如果你们中有人知道如何解决这个问题，我们将不胜感激(视差层的影响是否严重？)。另外，如果有什么不清楚的地方，请不要犹豫。

div = document.getElementById("div1").clientHeight;
  list = document.getElementsByClassName("else");
  for (var i = 0; i < list.length; i++) {
    list[i].style.lineHeight=div-14+"px";
  }
$(document).ready(function(){
    $("a").on('click', function(event){
      if (this.hash !== ""){
        event.preventDefault();
        var hash = this.hash;
        $('html, body').animate({scrollTop: $(hash).offset().top}, 800, function(){
          window.location.hash = hash;
        });
      }
    });
  });
body{
  font-family: 'Dosis';font-size: 19px;
  margin: 0;
  padding: 0;
}
header{
  background-color: white;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
}

header div{
  margin:auto;
  width:100%;
  overflow: auto;
  /*border:1px solid black;*/
}

header div ul{
  list-style-type: none;
  margin:auto;
  width:100%;
}

header div ul li{
  float:left;
  /*border: .5px solid red;*/
}

header div ul li a{
  display:block;
  text-decoration: none;
  color:black;
  text-align:center;
  transition: color .3s;
}

header div ul li a.first{
  margin-left:100px;
  margin-right:30px;
}

header div ul li a.else{
  margin-left:20px;
  margin-right:20px;
}

header div ul li a.active{
  color:tomato;
}

#h2title{
  margin-bottom:0px;
  padding-bottom:0px;
  margin-top: 0;
  padding-top: 0;
}

header div ul li a:hover:not(.active){
  color:tomato;
}
/*===========================================================================*/
.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
  font-size: 200%;
}

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

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

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  border:1px solid black;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-1px) scale(2);
  transform: translateZ(-1px) scale(2);
}
 /* centre the content in the parallax layers */
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color:white;
}

.huge{
  font-size: 400%;
}

#group1{
  z-index: 2;
}

#group1 .parallax__layer--back{
  background-color:black;
}

#group2{
  z-index: 5;
}

#group2 .parallax__layer--base{
  background-color: white;
}

.button{
  background-color: white;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border: none;
  padding: 11px 25px;
  position:absolute;
  left: 50%;
  top: 72%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  outline:2px solid black;
  transition: .4s;
}

.button:hover{
  background-color: rgb(255,99,71,0.3);
  outline: 2px solid white;
  color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div id="div1">
    <ul>
      <li style="position:relative; top:10px;">
        <a class="first" href="sthenos.html">
        <h2 id=h2title>STHENOS MOVEMENT</h2>
        <p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
        </a>
      </li>
      <li><p><a href="sthenos.html" class="active else">Accueil</a></p></li>
      <li><p><a href="sthenos.html" class="else">Toi dans tout ça</a></p></li>
      <li><p><a href="sthenos.html" class="else">Services entreprises/autorités</a></p></li>
      <li><p><a href="sthenos.html" class="else">À propos</a></p></li>
      <li><p><a href="sthenos.html" class="else">Contact</a></p></li>
    </ul>
  </div>
</header>
<body>
  <div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--back"></div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
        <div class="huge title">STHENOS MOVEMENT</div>
        <div>
          <a href="#group2" class="button" id="this_button">Découvrir l'association</a>
        </div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">BIEN</div>
      </div>
    </div>
  </div>
</body>

最佳答案

这只是关于您使用的哈希属性，它不适用于查询，因此您可以做类似的事情

// I have commented that part because it's not related to the question

/*var div = document.getElementById("div1").clientHeight;
  list = document.getElementsByClassName("else");
  for (var i = 0; i < list.length; i++) {
    list[i].style.lineHeight=div-14+"px";
  }*/
$(document).ready(function(){
    $("a").on('click', function(event){
              
      if ($(this).attr('href') != ""){
        event.preventDefault();  
        var hash = this.hash;
        $('html, body').animate({scrollTop: $(this).offset().top}, 800, function(){
          window.location.hash = hash;
        });
      }
    });
  });
<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
    
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div id="div1">
    <ul>
      <li style="position:relative; top:10px;">
        <a class="first" href="sthenos.html">
        <h2 id=h2title>STHENOS MOVEMENT</h2>
        <p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
        </a>
      </li>
      <li><p><a href="sthenos.html" class="active else">Accueil</a></p></li>
      <li><p><a href="sthenos.html" class="else">Toi dans tout ça</a></p></li>
      <li><p><a href="sthenos.html" class="else">Services entreprises/autorités</a></p></li>
      <li><p><a href="sthenos.html" class="else">À propos</a></p></li>
      <li><p><a href="sthenos.html" class="else">Contact</a></p></li>
    </ul>
  </div>
</header>
<body>
  <div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--back"></div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
        <div class="huge title">STHENOS MOVEMENT</div>
        <div>
          <a href="#group2" class="button" id="this_button">Découvrir l'association</a>
        </div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">BIEN</div>
      </div>
    </div>
  </div>
</body>
  
</html>

关于javascript - jQuery 向下滚动按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49646390/

上一篇：html - 如何使用 CSS 隐藏数据列表的选项

下一篇：html - 将文本放在 Bootstrap 输入旁边不起作用

相关文章：

javascript - 使用 jQuery 设置动态下拉列表 (DOM) 的选定索引

javascript - 运行外部 javascript 文件来编辑 html 文件中的图形

javascript - 如何制作 JavaScript 书签以添加到 URL 的一部分？

javascript - 在 react 中遇到此 Bootstrap header 的问题

javascript - JavaScript 中的原型(prototype)问题

javascript - 文字字体调整

javascript - 单击网格中的任何图像时如何运行函数？

javascript - Jquery隐藏div列表并以5个部分显示

javascript - 使用 JQuery 隐藏/取消隐藏 DIV

javascript - 从包装表达式到链的意外 '.'

©2024 IT工具网  联系我们