Question

我已经在我制作的网站上使用过JavaScript（我想我是从这里得到的）一段时间了。现在我已经将它重用于我自己的主页，（几乎）完全相同的实现，它停止在Chrome和IE中工作。 Safari仍然很好，iOS也是如此。

这两页是www.hermann-musik.de和www.florianherzog.info（忽略德国爵士乐废话......）

脚本如下：

var EPPZScrollTo =
{
/**
 * Helpers.
 */
documentVerticalScrollPosition: function()
{
    if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
    if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode).
    if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8.
    return 0; // None of the above.
},

viewportHeight: function()
{ return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },

documentHeight: function()
{ return (document.height !== undefined) ? document.height : document.body.offsetHeight; },

documentMaximumScrollPosition: function()
{ return this.documentHeight() - this.viewportHeight(); },

elementVerticalClientPositionById: function(id)
{
    var element = document.getElementById(id);
    var rectangle = element.getBoundingClientRect();
    return rectangle.top;
},

/**
 * Animation tick.
 */
scrollVerticalTickToPosition: function(currentPosition, targetPosition)
{
    var filter = 0.1;
    var fps = 60;
    var difference = parseFloat(targetPosition) - parseFloat(currentPosition);

    // Snap, then stop if arrived.
    var arrived = (Math.abs(difference) <= 0.5);
    if (arrived)
    {
        // Apply target.
        scrollTo(0.0, targetPosition);
        return;
    }

    // Filtered position.
    currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);

    // Apply target.
    scrollTo(0.0, Math.round(currentPosition));

    // Schedule next tick.
    setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
},

/**
 * For public use.
 *
 * @param id The id of the element to scroll to.
 * @param padding Top padding to apply above element.
 */
scrollTo: function(id, padding)
{
    var element = document.getElementById(id);
    if (element == null)
    {
        console.warn('Cannot find element with id \''+id+'\'.');
        return;
    }

    var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
    var currentPosition = this.documentVerticalScrollPosition();

    // Clamp.
    var maximumScrollPosition = this.documentMaximumScrollPosition();
    if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;

    // Start animation.
    this.scrollVerticalTickToPosition(currentPosition, targetPosition);
}
};

我实现了这个（可能它很可怕......我的JS知识总是很糟糕，恶化到几乎不存在）：

<a href='javascript:;' onclick="EPPZScrollTo.scrollTo('bio',80);">bio</a>

两者之间的唯一区别在于，一个导航条在滚动时移动...在另一个中它没有移动。

我知道要挖掘我可怕的编码/代码窃取可能要花很多钱，但是如果有人提示，我会非常感激！

干杯

用于滚动的Javascript在一个站点上工作，但不在另一个站点上工作

0 个答案: