我是jQuery的新手，我想知道为什么我的向下滚动按钮无法正常工作。我一直在寻找几个论坛供稿，但我似乎无法弄清楚如何使它工作。在这里，我希望链接按钮的id =＆＃34; this_button＆＃34;顺利跳转到id =＆＃34; group2＆＃34;。
制作平滑滚动的脚本非常基本，已经多次看过，所以我无法弄清楚我做错了什么。如果你们中的任何一个人知道如何解决这个问题，那就不胜感激（视差层是否影响很严重？）。此外，如果事情不明确，请不要犹豫。
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>
答案 0 :(得分：0)
它只是关于你使用它的哈希属性它不适用于查询，所以你可以做类似的事情
maven-surefire-plugin<plugins>
<plugin>
<groupId>org.sonarsource.scanner.maven</groupId>
<artifactId>sonar-maven-plugin</artifactId>
<version>3.4.0.905</version>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<executions>
<execution>
<phase>test</phase>
</execution>
</executions>
<configuration>
<!-- the @{argLine} is needed for proper jacoco execution -->
<argLine>@{argLine} -Xmx256m</argLine>
</configuration>
</plugin>
<plugin>
<groupId>org.jacoco</groupId>
<artifactId>jacoco-maven-plugin</artifactId>
<version>0.7.9</version>
<executions>
<execution>
<id>jacoco-initialize</id>
<goals>
<goal>prepare-agent</goal>
</goals>
</execution>
<!-- generate fancy html report -->
<execution>
<id>jacoco-site</id>
<phase>package</phase>
<goals>
<goal>report</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
答案 1 :(得分：-1)
试试这个，它正在运作。
<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>