jQuery平滑滚动跳跃而不是滚动-如何解决?

时间:2019-01-11 18:33:40

标签: javascript jquery html css scroll

我试图通过Jquery将“平滑滚动”添加到我的HTML站点。

它只是跳跃而不是平滑的滚动效果。

我尝试了许多不同的Jquery代码,但是都没有解决跳转问题。

jQuery(document).ready(function($) {
  function scrollToSection(event) {
    event.preventDefault();
    var $section = $($(this).attr('href')); 
    $('html, body').animate({
      scrollTop: $section.offset().top
    }, 100);
  }
  $('[data-scroll]').on('click', scrollToSection);
}(jQuery));

我的HTML代码:

锚点(导航)

<div class="inner">
    <a data-scroll href="#1" class="subNavBtn">ABOUT</a>
    <a data-scroll href="#2" class="subNavBtn">TERMINE</a>
    <a data-scroll href="#3" class="subNavBtn">RECORDINGS</a>
    <a data-scroll href="#4" class="subNavBtn">FOTOS</a>
    <a data-scroll href="#5" class="subNavBtn">VIDEOS</a>
    <a data-scroll href="#6" class="subNavBtn">CONTACT</a>
    <a data-scroll href="#7" class="subNavBtn">FREUNDE</a>
</div>

我要滚动到的部分:

<section id="1">
    <div class="div abouthead">
            <div class="inner">
                <!--
                <h1>Ich bin <b>Heinz Lichius</b><br>Jazz Musiker, Platzhalterwort, Performer, Künstler</h1>
            -->
            <section>
<p>
 Heinz begann als Kind mit dem Schlagzeugspielen. Inspiriert durch seinen Vater nahm Jazz eine prägende Rolle ein, nicht nur stilistisch sondern konzeptionell. Nach einer klassisch geprägten Ausbildung und diversen Jazzworkshops studierte er an der Musikhochschule in Hamburg, wo er seit 1990 lebt.
            </p><p>
Verschiedene Projekte führten ihn um den Globus, so spielte er mit den Bigbands des NDR, des HR, Metropol Orchestra und Roger Cicero, dem Jonas Schoes Quartett mit Buggy Braune und Pepe Berns, Schumannize, Solea, Jon Hammond, Jürgen Attig, Lutz Büchner, Lorenz Bösche, Stephan Abel, Jo Gallardo´s Latino Blue, Nils Gessinger, Ulita Knaus, Peter Weniger, Paul O`Brien, Ulla Meinecke, Orange Blue,...
 </p><p>
Heinz unterrichtet an der Hochschule für Musik, Theater und Medien Hannover, der Hochschule für Musik und Theater Hamburg sowie der Hamburg School of Music.
</p>
            </section>

        </div>
    </div>
        </section>

0 个答案:

没有答案
相关问题