JS 滚动事件未启动

Question

我尝试用我在网上找到的 js 函数覆盖 scroll-to-id-event (Smoothly scroll to an element)。

由于未知原因，它不会启动。 Js 本身是正确实现的，因为我设法用 document.print('test');

输出了一些文本

我真的不是很喜欢Js，所以请耐心等待我。

Index.php:

<html>
    <head>
        <title>MyWebsite</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <!-- JS WORKS THIS WAY -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

        <!-- FIRST TRY HERE -->
        <script src="jquery/onScroll.js"></script>

        <link rel="stylesheet" href="css/layout.css" />
    </head>

    <body>  
        <!-- SECOND TRY HERE / also with <script type="text/javascript">-->
        <script>
        $('a[href^="#"]').on('click', function(event) {
            var target = $(this.href);
                if( target.length ) {
                    event.preventDefault();
                    $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
            }
        });
        </script>

        <div id="header">
            <div id="header" class="image light">
                Description overlayed on image.
                <footer class="dark">
                    My footer
                </footer>
            </div>
            <div id="header" class="description">
                Another Content
            </div>
        </div>
        <div id="register">
            Some Content.
        </div>
    </body>
</html>

onScroll.js

$('a[href^="#"]').on('click', function(event) 
{
    var target = $(this.href);
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});

结果：
什么都没发生。它以默认方式跳跃。已测试 Chrome 和 Firefox。

我希望我不会因为这个相当简单的事情而被开除。 ^^
感谢你的帮助。非常感谢。

编辑 -> FIDDLE

Answer 1

你的问题是这一行

var target = $(this.href);

即使您在 html 中将 href 设置为 #Second，浏览器也会将 href 设置为完整路径（例如：http://www.yoursite.com#Second）。要获得你的哈希选择器，你可以使用这样的东西。

var target = $('#' + this.href.split('#')[1]);

Answer 2

问题出在您的 target 变量上。 this 指的是 DOM 元素，因此如另一个答案中所述，this.href return 是元素的完整 href。更好的解决方案是使用 jQuery 的 .attr 方法来 return href 属性的确切内容。例如：

$('a[href^="#"]').on('click', function(event) {
        var target = $($(this).attr('href'));
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
});

这样，您将 target 设置为 jQuery 集合，其中包含与 href 内的选择器匹配的元素（在本例中为一个），例如 #Second

这是一个working fork of your fiddle

Answer 3

我对您的代码进行了一些更改并成功了。在你 link 滚动到另一个 div 时，我使用了：

<a href="javascript:;" data-scroll-to="#Second" class="button">Scroll to Second!</a>

在 javascript 代码上：

$('[data-scroll-to]').on('click', function(event) {
        var target = $(this).data('scroll-to');    
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 1000);
        }
    });

现在，只要您想滚动某些内容，只需在您的代码中使用 data-scroll-to="#something" 并将 javascript:; 放在 href 属性上，以防止 link.[=14 上的任何 onclick 事件=]

JS 滚动事件未启动

JS Scroll Event not firing up

javascript

php

scroll

onclick