javascript - 恢复滚动位置不会发生

时间:2015-11-02 16:45:13

标签: javascript

function getScrollTop()
{
    if(typeof(window.pageYOffset) === 'number')
    {
        // DOM compliant, IE9+
        window.scrollY = window.pageYOffset;
    }
    else
    {
        // IE6-8 workaround
        if(document.body && document.body.scrollTop)
        {
            // IE quirks mode
            window.scrollY = document.body.scrollTop;
        }
            else if(document.documentElement && document.documentElement.scrollTop)
        {
            // IE6+ standards compliant mode
            window.scrollY = document.documentElement.scrollTop;
        }
    }
}

function getScrollLeft()
{
    if(typeof(window.pageXOffset) === 'number')
    {
        // DOM compliant, IE9+
        window.scrollX = window.pageXOffset;
    }
    else
    {
        // IE6-8 workaround
        if(document.body && document.body.scrollLeft)
        {
            // IE quirks mode
            window.scrollX = document.body.scrollLeft;
        }
        else if(document.documentElement && document.documentElement.scrollLeft)
        {
            // IE6+ standards compliant mode
            window.scrollX = document.documentElement.scrollLeft;
        }
    }
}

 // Summed-Up
function imgButtonClick()
{
    getScrollTop();
    getScrollLeft();
    /*Some simple hidden code*/
    window.scroll(window.scrollX, window.scrollY);
}

getScrollTop()和getScrollLeft()函数是从Internet获得的 - 以合法的方式,但简单的代码添加不起作用(scroll(window.scrollX,window.scrollY);)。 Mozilla的开发者工具' Web控制台(在Firefox中)不显示错误。但是,一旦填充了常量来代替scrollX和scrollY全局变量 - 它通过滚动页面来完成简化的功能。其余的代码,这篇文章中没有显示 - 按照要求运行。页面上的其他全局变量也按要求执行。

1 个答案:

答案 0 :(得分:0)

如果您尝试设置滚动效果的动画,则需要一些额外的代码来动画滚动页面。以下是一些用于即时设置滚动位置的示例函数:

function scrollToElement(element, scrollToTop)
{
    var element = document.getElementById(element);
    var elLoc = element.getBoundingClientRect();
    var topCoord = elLoc.top + (scrollToTop ? window.innerHeight : 0);
    console.log("About to scroll to: " + topCoord + ":" + elLoc.left);
    window.scroll(elLoc.left, topCoord);
}

function scrollBackToTop()
{
    window.scroll(0,0);   
}

如果您希望为滚动效果设置动画,请查看以下内容:

Click here for a javascript solution

Click here for a css solution

您也可以使用没有插件的jQuery在应用程序或项目中的任何位置使用一行代码来完成此任务:

$('html, body').animate(
{
    scrollTop: $("#target-element").offset().top
}, 1000);

取自here