Question

我尝试使用我在网上(Smoothly scroll to an element)找到的js-function覆盖了滚动到id的事件。

由于未知原因，它不会启动。 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。

我希望我不会因为这件相当简单的事而被踢掉。 ^^
感谢您的帮助。非常感谢。

编辑 - ＆gt; FIDDLE

Answer 1

问题在于您的target变量。 this引用DOM元素，如另一个答案所述，this.href返回元素的完整href。更好的解决方案是使用jQuery的.attr方法返回href属性的确切内容。 E.g：

$('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 2

你的问题就在这一行

var target = $(this.href);

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

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

Answer 3

我对您的代码进行了一些更改并且工作正常。在滚动到另一个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"，在href属性上放置javascript:;，以防止链接上发生任何onclick事件。

JS Scroll Event没有启动

3 个答案: