Question

我一直试图让我的锚点顺利滚动，但它不起作用。我一直使用的脚本Smoothscroll.js，但这在这个网站上无法正常工作？我已经尝试使用许多其他脚本来使操作工作，但没有任何工作。有关使Smoothscroll工作的任何想法？

由于

<head>
    <body>
        <main>
            <div class="main">
                <div class="P1" id="P1">
                    <div id="P1A">
                        <a name="P1A"></a>
                    </div>
                    <div id="P1heading" <h1>UponAuto</h1>
                    </div>
                </div>
                <div class="P2" id="P2">
                    <div id="P2A">
                        <a name="P2A"></a>
                    </div>
                    <div id="P2holding"></div>
                </div>
                <div class="P3" id="P3">
                    <div id="P3A">
                        <a name="P3A"></a>
                    </div>
                </div>
                <div class="P4" id="P4">
                    <div id="P4A">
                        <a name="P4A"></a>
                    </div>
                    <div id="P4holding"></div>
                </div>
                <div class="P5" id="P5">
                    <div id="P5A">
                        <a name="P5A"></a>
                    </div>
                </div>
        </main>
        <nav id="nav">
            <div class="main">
                <div align="center">
                    <table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="59">
                                <li><a href="#P1A"><i class="fa fa-university fa-lg "></i></li></td>
              </tr>
              <tr>
                <td height="59"><li><a href="#P2A"><i class="fa fa-camera-retro fa-lg"></i></li></td>
              </tr>
              <tr>
                <td height="59"> <li><a href="#P3A"><i class="fa fa-picture-o fa-lg"></i></li></td>
              </tr>
              <tr>
                <td height="59"><li><a href="#P4A"><i class="fa fa-comments fa-lg"></i></li></td>
              </tr>
              <tr>
                <td height="59"><li><a href="#P5A"><i class="fa fa-tachometer fa-lg"></i></li></td>
              </tr>
  </table>
          </div>          
        </nav>

Answer 1

我认为，要使该插件正常工作，您需要在链接中使用data-scroll。

<a data-scroll href="#place">place</a>

Answer 2

检查http://www.raywenderlich.com/96741/watchkit-tutorial-with-swift-tables-glances-and-handoff metod（jquery）

$(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;
  }
}
});});

Answer 3

<body>
    <main>
        <div class="main">
            <div class="P1" id="P1">
                <div id="P1A"><a name="P1A"></a></div>
                <div id="P1heading">P1A</div>
            </div>
            <div class="P2" id="P2">
                <div id="P2A"><a name="P2A"></a></div>
                <div id="P2holding">P2A</div>
            </div>
            <div class="P3" id="P3">
                <div id="P3A"><a name="P3A"></a></div>
                <div id="P2holding">P3A</div>
            </div>
            <div class="P4" id="P4">
                <div id="P4A"><a name="P4A"></a></div>
                <div id="P4holding">P4A</div>
            </div>
            <div class="P5" id="P5">
                <div id="P5A"><a name="P5A"></a></div>
                <div id="P4holding">P5A</div>
            </div>
        </div>  
    </main>
    <nav id="nav">
        <div class="main">
            <div align="center">
               <table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                     <td height="59">
                        <li><a data-scroll data-options='{ "easing": "linear" }' href="#P1A"><i class="fa fa-university fa-lg "></i>a</a></li>
                     </td>
                  </tr>
                  <tr>
                     <td height="59">
                        <li><a data-scroll data-options='{ "easing": "linear" }' href="#P2A"><i class="fa fa-camera-retro fa-lg"></i>s</a></li>
                     </td>
                  </tr>
                  <tr>
                     <td height="59">
                        <li><a data-scroll data-options='{ "easing": "linear" }' href="#P3A"><i class="fa fa-picture-o fa-lg"></i>d</a></li>
                     </td>
                  </tr>
                  <tr>
                     <td height="59">
                        <li><a data-scroll data-options='{ "easing": "linear" }' href="#P4A"><i class="fa fa-comments fa-lg"></i>f</a></li>
                     </td>
                  </tr>
                  <tr>
                     <td height="59">
                        <li><a data-scroll data-options='{ "easing": "linear" }' href="#P5A"><i class="fa fa-tachometer fa-lg"></i>g</a></li>
                     </td>
                  </tr>
               </table>
            </div>
         </div>
    </nav>
</body>

<script>
  smoothScroll.init({
    speed: 1000,
    easing: 'easeInOutCubic',
    offset: 0,
    updateURL: true,
    callbackBefore: function ( toggle, anchor ) {},
    callbackAfter: function ( toggle, anchor ) {}
  });
</script>

SmoothScroll无法使用Table nav

3 个答案: