Question

仍然在我的网站上工作：http://i333180.iris.fhict.nl/p2_vc/

有一个用于向下导航的按钮，动作是即时的，但平滑滚动更好。

所以，我谷歌周围，尝试了很多，我找到的最短的脚本是这样的：但我无法让它发挥作用。

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

参考：https://css-tricks.com/snippets/jquery/smooth-scrolling/

这就是我在

之间加入代码的方式

<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <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;
          }
        }
      });
    });
    </script>
    </head>

按钮：

<body>
    <a id='button_down' href='#section' onclick="document.getElementById('moodvideo').pause()"><img src='scroll.png' alt='Scroll'></a>
</body>

我检查了示例网站女巫被给出并以与我的html相同的方式添加它。经过参考检查的链接：https://css-tricks.com/examples/SmoothPageScroll/ 但我不能让它发挥作用..

此外，我还有一个其他脚本，在视频结束后，女巫需要同样的动作。现在的脚本是：

    <script>
        function videoEnded() {
            window.location.href="#section";
        }
    </script>

这必须做同样的事情;滚动得很好。

我希望我解释它是可以理解的，如果没有，我想再试一次。此致

EDIT 脚本未添加到在线网站，因为该脚本尚未运行，如果它更容易我可以在线添加。

更新网站已联机且无法正常运行

Answer 1

该脚本适用于您的实时副本上的链接，因此我认为您的意思是videoEnd()功能。

您找到的平滑滚动脚本仅适用于锚标记（<a>）。

由于window.location.href = "#section"不是锚标记，因此不受脚本的影响。

然而，您可以采取该脚本的重要部分，并在videoEnd()函数中使用它。

function videoEnded() {
    $('html,body').animate({
        scrollTop: $("#section").offset().top
    }, 1000);
}

修改

它不适合您的原因是因为您使用file://协议浏览页面，并且链接到jQuery的脚本源是

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

使用//相对方案，这意味着浏览器会附加当前的浏览方案，将其转换为此...

file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

哪个不存在。如果您指定http://，它将起作用

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Answer 2

这段<script>要好得多：

$( document ).ready( function () {
    $( "a[href*='#']" ).on( "click", function( event ) {
        event.preventDefault();
        var href = event.target.href; 
        href = href.slice( href.indexOf( "#" ), href.length );
        $( "body" ).animate( {
           scrollTop: $( href ).get( 0 ).offsetTop
        }, 1000 );
    } );
} );

Javascript smoothscroll无效

2 个答案: