JS Scroll Event没有启动

时间:2015-05-17 10:00:03

标签: javascript php scroll onclick

我尝试使用我在网上(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

3 个答案:

答案 0 :(得分:2)

问题在于您的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

答案 1 :(得分:1)

你的问题就在这一行

var target = $(this.href);

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

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

答案 2 :(得分:0)

我对您的代码进行了一些更改并且工作正常。 在滚动到另一个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事件。