jQuery向下滚动按钮不起作用

时间:2018-04-04 08:37:44

标签: 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;
        });
      }
    });
  });
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 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>