Question

固定！在此问题的最后找到解决方案

我一直在一个网站上工作，我有一个索引页面和一个信息页面。当您在索引页面中向下滚动并单击指向信息页面的链接时，我希望信息页面在滚动索引页面的相同位置打开。

我在Stackoverflow上阅读了ScrollSneak以及几个类似的问题和解释，但可以让它自己运行。我是一个javascript的菜鸟，我只是开始学习如何使用它。有人可以举个例子来说明如何将它实际应用到链接吗？我似乎无法看到哪个元素实际上将它链接到实际链接。

我在下面找到并应用了代码（删除了gist链接导致我的声誉太低，无法添加超过2个链接xD检查ScrollSneak的文件）

      <!DOCTYPE html>
<html>
    <head>
        <!--i'm using jquery too -->
        <script type="text/javascript" src="path/to/jquery.js"></script>
        <!-- include scroll_sneak.js -->
        <script type="text/javascript" src="path/to/scroll_sneak.js"></script>

        <!-- now activate scroll sneak -->
        <script type="text/javascript">
        $(document).ready(function(){
            var sneaky = new ScrollSneak(location.hostname);

            // you want to prevent scrolling when form #my-form is submitted
            document.getElementById('my-form').onsubmit = sneaky.sneak;

            // or maybe you want to prevent scrolling whenever any link within 
            // a list-option is clicked:
            $('li a').each(function(){
                // note the use of 'this' instead of '$(this)', because we
                // want the raw element, not the jQuery object       
                this.onclick = sneaky.sneak;
            });
        });
        </script>
    </head>
    <body>

        <a href="info.html"><img src="IMG/info_inactive.png" onmouseover="this.src='IMG/info_active.png'" onmouseout="this.src='IMG/info_inactive.png'" /></a>
        ...
    </body>
</html>

重叠代码我现在正在使用

<script>
window.addEventListener("load", function(){
 var load_screen = document.getElementById("load_screen");
 document.body.removeChild(load_screen);
});
</script>

解<！/强>

我能够在this forum topic上找到工作代码，提交者在Stackoverflow上的另一个主题上找到了它。没有进一步的代码！

首先，您需要一个读取cookie功能。将其放在页面的部分中：

<script language="JavaScript"> function readCookie(name){ return(document.cookie.match('(^|; )'+name+'=([^;]*)')||0)[2] } </script>

接下来修改body标签，如下所示：

<body onScroll="document.cookie='ypos=' + window.pageYOffset" onLoad="window.scrollTo(0,readCookie('ypos'))">

注意！在Chrome，Firefox和Safari中测试过。 “令人惊讶的是”这在IE中不起作用，但是谁还使用IE？ -_-

感谢大家帮助我，非常感谢;）

Answer 1

如果Taffer的解决方案不适合您，您可以尝试将滚动位置添加为get参数。

（披露：我不使用jquery，我更喜欢Mootools，但这应该有效）

为您要在新页面上滚动的每个链接添加一个标识类：

<a class="linkandscroll" href="info.html">link</a>

然后在每个页面上添加：

<script>

    /* Method to return get params from url
    thanks to: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
    */

    function getUrlParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) 
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) 
            {
                return sParameterName[1];
            }
        }
        return false;
    }

    /* Method to link and set scroll get param */

    function linkAndScroll(element){
        /* get link element's href attribute */
        var href = element.attr('href');
        /* get curent scroll position */
        var currentScroll = $('body').scrollTop();
        /* create new url */
        var url = href + '?scrollto=' + currentScroll;
        /* change page location */
        window.location.href = url;
    }

    /* on doc ready */

    $(document).ready(function(){

        /* loop through each scrolling link */

        $('a.linkandscroll').each(function(){ 
           /* add click event to call linkAndScroll method */
           $(this).on('click', function(){
                linkAndScroll($(this));
                return false;
            });
        });

        /* If scroll param is set on this page, do scroll now */

        var scroll = getUrlParameter('scrollto');
        if(scroll){
            window.scrollTo(0, scroll);
        }

    });

</script>

Answer 2

我认为你不需要滚动，这比这更简单。根据您的需要，有几种解决方案，JSRef：

<script>
function scrollWin() {
    window.scrollTo(500, 0);
}
</script>

（在此扩展：http://www.w3schools.com/jsref/met_win_scrollto.asp）

它表示500的空间是在X轴（左和右）上滚动，0表示Y轴（上下）。您只需更改数字，直到找到您喜欢的位置。要使它转到另一个页面然后执行它，你可以制作一个脚本，它接受一些参数，比如链接的URL和特定的位置（或链接所包含的元素的值），并将它们投入使用，像这样：

<script>
function linkAndScrollTo(theURL, xPos, yPos){
   window.location.href = theURL;
   window.scrollTo(xPos, yPos);
}
<script>

或者，如果您希望它一般滚动到某个元素，您可以为应该“可滚动到”的元素添加ID，然后在下一页上将链接指向该ID。例如：

<div>
   <a href="http://www.yourPage.com/Info.html#theElementsIDHere">SomethingSomethingDarkside</a>
</div>

可能还有更多，我希望这回答了这个问题。

通过链接点击

2 个答案: