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

Question

I'm trying to make a photography portfolio website, and need to make a scroll down button. 我正在尝试制作摄影作品集网站，并且需要制作一个向下滚动按钮。 I made the scroll button using html and css and tried to use jquery to create an animation where it slowly goes down the page when you click the scroll down button. 我使用html和css制作了滚动按钮，并尝试使用jquery创建一个动画，当您单击向下滚动按钮时，它会缓慢地向下滚动页面。 However, as of right now it just immediately goes down to the second section. 但是，截止到现在，它立即进入第二部分。 However, when I tried to it on codepen, the animation worked. 但是，当我尝试在Codepen上进行操作时，动画效果良好。

https://codepen.io/alihaider2018/pen/PQQXLZ (imgs not showing, and changed background to blue so you can see the button better) https://codepen.io/alihaider2018/pen/PQQXLZ （未显示img，并将背景更改为蓝色，以便您可以更好地看到按钮）

$(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

Your HTML is a complete invalid mess. 您的HTML完全无效。 I tried to fix it somehow and the following animation work: 我试图以某种方式修复它，并且以下动画工作：

(click on the "section02" link to animate) （单击“ 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 个解决方案

解决方案1
0 已采纳 2018-02-19 17:23:18

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-19 17:23:18

解决方案1
0 已采纳 2018-02-19 17:23:18