Question

所以我试图让平滑的滚动工作。所以这就是我所拥有的

   <!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
    <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style1.css" />
    <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>
                    <body >

            <section id="page">
                <ul class="cb-slideshow">
                    <li><span style="background: #009dff;">Image 01</span><div><h3>Colourity</h3></div></li>
                    <li><span style="background: #003840;">Image 02</span><div><h3>Colourity</h3></div></li>
                    <li><span style="background: #02A676;">Image 03</span><div><h3>Colourity</h3></div></li>
                    <li><span style="background: #4FAAC9;">Image 04</span><div><h3>Colourity</h3></div></li>
                    <li><span style="background: #FF5952;">Image 05</span><div><h3>Colourity</h3></div></li>
                    <li><span style="background: #96D6D9;">Image 06</span><div><h3>Colourity</h3></div></li>
                </ul>
                <div id="content">
                <a href="#page">Click</a>
               </div>
            </section>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top
    }, 1000);
    return false;
  }
}
  });
});

因此，当我点击href时，它只会“快照”到#page。而不是顺利过渡到它。我对Javascript不好，所以任何帮助以及为什么会发生这种情况会更好。

Answer 1

尝试将jQuery加载器放在HTML之后，就在其他Javascript之前。

为什么平滑滚动不起作用？

1 个答案: