jQuery向下滚动按钮不起作用

Question

I'm new to jQuery and I'm wondering why my scroll down button won't work. 我是jQuery的新手，我想知道为什么向下滚动按钮不起作用。 I have been looking at several forum feeds but I can't seem to figure out how to make it work. 我一直在看几个论坛供稿，但似乎无法弄清楚它如何工作。 Here I'd like for the link-button with id="this_button" to make a smooth jump to id="group2". 在这里，我希望id =“ this_button”的链接按钮可以平滑跳转到id =“ group2”。

The script to make the smooth scroll is pretty basic and has already been seen multiple times, so I can't figure out what I did wrong. 进行平滑滚动的脚本非常基本，已经被多次浏览，所以我无法弄清楚自己做错了什么。 If any of you has an idea of how to solve this, it'd be grateful (Does the parallax layers influence badly ?). 如果您有任何解决方案的想法，将不胜感激（视差层会产生严重影响吗？）。 Also, if something is not clear, don't hesitate to ask. 另外，如果不清楚，请不要犹豫。

 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>

Answer 1

It's just about hash property you use it's not functional with query, so instead you can do something like that 它只是关于您使用的哈希属性，不适用于查询，因此您可以执行类似的操作

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

Answer 2

Try this, it is working. 试试这个，它正在工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("a").click(function() {
   scrollToAnchor(this.name);
});

});
function scrollToAnchor(aid){
  var aTag = $("a[name='"+ aid +"']");
  $('.parallax').animate({scrollTop: aTag.offset().top},5000);
}

</script>

jQuery向下滚动按钮不起作用

问题描述

2 个解决方案

解决方案1
0 2018-04-04 15:28:47

解决方案2
-1 2018-04-04 09:20:34

jQuery向下滚动按钮不起作用

问题描述

2 个解决方案

解决方案1 0 2018-04-04 15:28:47

解决方案2 -1 2018-04-04 09:20:34

解决方案1
0 2018-04-04 15:28:47

解决方案2
-1 2018-04-04 09:20:34