Question

我有一个宽度为600vw的页面。
它有点像幻灯片放映，但随后是页面。

问题在于我不希望我的页面在第一个位置刷新并加载，而是在当前位置我阅读了有关如何使用ScrollTop()执行此操作的一些内容，并且我还尝试将每个ScrollTop()进行搜索到ScrollLeft()，但这不起作用。 参见代码：

var page_y = $( document ).ScrollLeft();
window.location.href = window.location.href + '?page_y=' + page_y;


//code to handle setting page offset on load
$(function() {
    if ( window.location.href.indexOf( 'page_y' ) != -1 ) {
        //gets the number from end of url
        var match = window.location.href.split('?')[1].match( /\d+$/ );
        var page_y = match[0];

        //sets the page offset 
        $( 'html, body' ).ScrollLeft( page_y );
    }
});

同样document.location.reload(true)不起作用，当我在我的代码中用它刷新它只是给出一个

502 Bad Gateway

我想使用php或jquery / javascript。

当前代码：

$(document).ready(function () {
        $('button').click(function () {
            $('button.current').removeClass('current');
            $(this).addClass('current');
        });
        $('#slide1').click(function () {
            article.style.left = "0";
        });
        $('#slide2').click(function () {
            article.style.left = "-500px";
        });
        $('#slide3').click(function () {
            article.style.left = "-1000px";
        });
 });

* {
    border: 0;
    margin: 0;
    padding: 0;
}

html{
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin: 0 0 30px;
}

header {
    width: 100%;
    position: fixed;
    z-index: 10;
    background: #ffe7d9;
}

nav{
    width: 500px;
}

nav button{
    width: 30%;
    box-sizing: border-box;
    display: inline;
    list-style-type: none;
    cursor: pointer;
}

article {
    width: 1500px;
    position: absolute;
}

.page{
    width: 490px;
    height: 500px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <nav id="menu">
         <ul>
            <button id="slide1"><li>slide1</li></button>
            <button id="slide2"><li>slide2</li></button>
            <button id="slide3"><li>slide3</li></button>
         </ul>
    </nav>
</header>
<article id='article'>
<div class='page' style='background-color: green;'></div>
<div class='page' style='background-color: red;'></div>
<div class='page' style='background-color: yellow;'></div>
</article>

如果我添加

var page_y = $( document ).scrollLeft();

//code to handle setting page offset on load
$(function() {
    if ( window.location.href.indexOf( 'page_y' ) != -1 ) {
        //gets the number from end of url
        var match = window.location.href.split('?')[1].match( /\d+$/ );
        var temp_page_y = match[0];

        //sets the page offset 
        $( 'html, body' ).scrollLeft( temp_page_y );
    } else {
        /****** the code *****/
        window.location.href = window.location.href + '?page_y=' + page_y;
    }
});

代码不起作用

Answer 1

您在脚本运行的window.location.href中设置了带有page_y的新网址，这就是您每次重新加载网页的原因。请在else条件下使用此功能。

var page_y = $( document ).scrollLeft();

//code to handle setting page offset on load
$(function() {
    if ( window.location.href.indexOf( 'page_y' ) != -1 ) {
        //gets the number from end of url
        var match = window.location.href.split('?')[1].match( /\d+$/ );
        var temp_page_y = match[0];

        //sets the page offset 
        $( 'html, body' ).scrollLeft( temp_page_y );
    } else {
        /****** the code *****/
        window.location.href = window.location.href + '?page_y=' + page_y;
    }
});

在当前位置重新加载页面

1 个答案: