Question

所以，我对javascript很新，并建立了一个我试图在页面上设置动画卷轴的网站。

要使用此代码启用动画滚动链接：

jQuery(document).ready(function ($) {
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

         var target = this.hash,
         $target = $(target);

         $('html, body').stop().animate({
             'scrollTop': $target.offset().top
         }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
})();

要滚动到页面顶部，我正在使用此代码。

//<-- scroll top -->

var $top = jQuery.noConflict();
$top("#scroll-top").hide();

// fade in #scroll-top
$top(window).scroll(function () {
    if ($top(this).scrollTop() > 150) {
        $top('#scroll-top').fadeIn();
    } else {
        $top('#scroll-top').fadeOut();
    }
});

// scroll body to 0px on click
$top('#scroll-top a').click(function () {
    $top('body,html').animate({
        scrollTop: 0
    }, 800);
    return false;
});

它们都可以独立工作，但不能一起工作。任何人都可以帮我找出他们冲突的原因，以及如何解决冲突？

Answer 1

所以，这就是我解决问题的方法：

我删除了冲突的代码＆＃34; //点击＆＃34时将正文滚动到0px;而是使用动画滚动来锚定链接以动画两个功能，同时放置在页面顶部。

jQuery(document).ready(function ($) {
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

         var target = this.hash,
         $target = $(target);

         $('html, body').stop().animate({
             'scrollTop': $target.offset().top
         }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
})();

我工作正常，但我只缺少一个功能，即javascript识别以＃以外的其他内容开头的内部链接。目前它还没有识别出这个链接http://julebord.bedriftsdesign.no/julebord.html#julemeny。它只有在我使用它时才有效：#julemeny

滚动到顶部，动画滚动到#page链接冲突

1 个答案: