Question

我正在尝试制作一个摄影作品集网站，并且需要制作一个向下滚动按钮。我使用html和css创建了滚动按钮，并尝试使用jquery创建一个动画，当您单击向下滚动按钮时，它会慢慢下降到页面。但是，截至目前，它只是立即进入第二部分。但是，当我在codepen上尝试它时，动画起作用了。

https://codepen.io/alihaider2018/pen/PQQXLZ（imgs没有显示，并将背景更改为蓝色，因此您可以更好地看到按钮）

$(function() {
    $('a[href*=#]').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
    }); 
});

 #section01 a span {
      position: absolute;
      top: 800px;
      left: 50%;
      width: 46px;
      height: 46px;
      margin-left: -23px;
      border: 1px solid #fff;
      border-radius: 100%;
      box-sizing: border-box;
    }

    #section01 a span::after {
      position: absolute;
      top: 50%;
      left: 50%;
      content: '';
      width: 16px;
      height: 16px;
      margin: -12px 0 0 -8px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      box-sizing: border-box;
    }

    #section01 a span::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      content: '';
      width: 44px;
      height: 44px;
      box-shadow: 0 0 0 0 rgba(255,255,255,.1);
      border-radius: 100%;
      opacity: 0;
    }

<!DOCTYPE html>
    <html ng-app>
    <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="Nature.js"></script>
     <link rel="stylesheet" type="text/css" href="webpage.css">
    </head>
    <section id="section01" class="demo">
    <body background="lol.jpg" >
      <div id="nav">

      <ul>
        <li><a href="Contact.html"> Contact </a></li>
        <li><a href="AboutMe.html"> About Me </a></li>
        <li><a href="Business.html"> Business </a></li>
        <li><a href="Street.html"> Street </a></li>
        <li><a href="Nature.html"> Nature </a></li>
      </ul>
      <p id="logo"><a href="webpage.html"> Icyportraitsgta </a></p>
    </div>
    <div id="description">
      <a href="#section02"><span>
          </span></a>

    <p class="para"> GTA Portrait photography <br> with your favourite themes </p>
    </div>
    </section>

    <img src="sanafull15.jpeg" class="sana15" alt="sanafull15"> </img>
    <img src="sanafulle.jpeg" class="sanafulle" alt="sanafulle"> </img>
    <img src="qasside.jpeg" class="qasside" alt="qasside"> </img>
    <section id="section02">
    <img src="icysit.jpg" class="icysit" alt="icysit"> </img>
    <img src="ravedited1.jpg" class="rav1" alt="rav1"> </img>
    <img src="qassmoke1.jpeg" class="qas2" alt="qas2"> </img>
    </body>
    </section>
    </html>

Answer 1

你的HTML是完全无效的混乱。我尝试以某种方式解决它并且以下动画工作：

（点击“section02”链接进行动画处理）

$(function() {
  console.log('ready');
  $('a[href^=#]').on('click', function(e) {
    console.log('click');
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
  });
});

#section01 a span {
  position: absolute;
  top: 800px;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 1px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
}

#section01 a span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

#section01 a span::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
  border-radius: 100%;
  opacity: 0;
}

<!DOCTYPE html>
<html ng-app>

<head>
  <meta charset="UTF-8">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js">
  </script>
</head>

<body background="lol.jpg">
  <section id="section01" class="demo">
    <div id="nav">
      <ul>
        <li><a href="Contact.html"> Contact </a></li>
        <li><a href="AboutMe.html"> About Me </a></li>
        <li><a href="Business.html"> Business </a></li>
        <li><a href="Street.html"> Street </a></li>
        <li><a href="Nature.html"> Nature </a></li>
      </ul>
      <p id="logo"><a href="webpage.html"> Icyportraitsgta </a></p>
    </div>
    <div id="description">
      <a href="#section02">section02<span>
      </span></a>

      <p class="para"> GTA Portrait photography <br> with your favourite themes </p>
    </div>

    <img src="sanafull15.jpeg" class="sana15" alt="sanafull15">
    <img src="sanafulle.jpeg" class="sanafulle" alt="sanafulle">
    <img src="qasside.jpeg" class="qasside" alt="qasside">
  </section>


  <section id="section02">

    <img src="icysit.jpg" class="icysit" alt="icysit">
    <img src="ravedited1.jpg" class="rav1" alt="rav1">
    <img src="qassmoke1.jpeg" class="qas2" alt="qas2">
  </section>
</body>

</html>

向下滚动按钮动画不起作用

1 个答案: