SilverStripe 中的 OnClick 滚动 JavaScript

Question

我想在 SilverStripe 中制作一个单页网站。我希望使用 JavaScript 在单击时平滑滚动，但我无法使其正常工作。

page.ss

<article>
    <div class="bgs" style="background-image:url($BackgroundImage.URL);">
        <a href="" name="$URLSegment"></a>
        <div class="rows">
            $Content
        </div>
    </div>
</article>

JavaScript

$('.menus-nav-item a').on('click', function() {
    var $root = $('html, body'),
    var $this = $(this),
    href= $this.attr('href');

    $root.animate({
        scrollTop: $(href).offset().top - 20
    }, 1000, function() {
        window.location.hash = href;
    });

我收到以下错误：

Uncaught Error: Syntax error, unrecognized expression: /#who-we-are

和

Uncaught TypeError: Cannot read property 'top' of undefined while calling the class attribute

Answer 1

找到答案了！

$(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 -54
                }, 1000);
                return false;
              }
            }
          });
        });


 });

SilverStripe 中的 OnClick 滚动 JavaScript

OnClick Scroll JavaScript in SilverStripe

scroll

onclick

silverstripe

page.ss

JavaScript