Question

我使用互联网上的2个脚本，一个用于平滑滚动到页面底部的DIV，另一个用于平滑滚动＆＃34;返回顶部＆＃34;。问题是两者之间存在冲突，因此＆＃34;回到顶部＆＃34;一个人不工作（没有回到顶部点击）。独立使用它们都能很好地工作。

我怎么能＆＃34;合并＆＃34;他们都成为一个单一的脚本？（并保持返回顶部脚本的淡入淡出效果）请参阅http://jsfiddle.net/GjsVq/1/

非常感谢

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


$(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });

    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});

Answer 1

$('a[href^="#"]').on(...正在选择<a>个元素。一种方法是重写此选择器以仅匹配应强制滚动到底部的<a>元素（可能使用CSS类？）

另一个快速而又脏的修复方法是在附加自己的点击处理程序之前重置“返回顶部”元素上的事件处理程序：jQuery('.back-to-top').off().click(...

Answer 2

我通常只使用一个平滑的滚动功能，然后使用href =“＃idOfHighestElementOnPage”设置我的“go to top”按钮。这是平滑的滚动功能（如果你不想走同样的路线，这可能包括一些有用的东西）：

$(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 - 100
            }, 'normal');
            return false;
        }
    }
});
})

window.onscroll = scrollFunction;
function scrollFunction() {
    var doc = document.documentElement, body = document.body;
    var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    if (top > 200) {
        $('.back-to-top').fadeIn();
    }
    else {
        $('.back-to-top').fadeOut();
    }
}

冲突的“回到顶部”脚本 - 如何修复？

2 个答案: