如何通过使用Javascript按后退按钮返回到HTML页面的上一个滚动位置

时间:2017-02-27 21:32:39

标签: javascript html

我正在设计一个在线购物网站,其中列出了许多产品图片。单击产品图像时,会显示产品图像的较大视图(为此我使用了javascript)。然后有一个BACK按钮。单击BACK按钮时,页面的滚动位置更改为最近的滚动位置。但是我希望在单击产品图像的位置获得上一个滚动位置。请帮帮我......谢谢你。

这是我的问题的示例代码

    <html>
    <head>
    <script>
        function viewImage(id){
            document.getElementById('first').style.display = "none";
            document.getElementById('second').style.display = "block";
            var image = document.getElementById(id).src;
            document.getElementById('view').src = image;
        }

        function back(){
            document.getElementById('second').style.display = "none";
            document.getElementById('first').style.display = "block";
            window.scrollTo(x,y);
            /* x and y values should be the values of the previous screen
            where an image was clicked. Means I want to go back to the
            previous scroll position where the image was clicked after 
            pressing "back" button; */
        }
    </script>

    <style>
        img{
            height:300;
            cursor: pointer;
        }
    </style>
    </head>
    <body>
    <div id="first">
    <img src="#" id="a" onclick="viewImage(this.id)"><br>
    <img src="#" id="b" onclick="viewImage(this.id)"><br>
    <img src="#" id="c" onclick="viewImage(this.id)"><br>
    <img src="#" id="d" onclick="viewImage(this.id)"><br>
    <img src="#" id="e" onclick="viewImage(this.id)"><br>
    <img src="#" id="f" onclick="viewImage(this.id)"><br>
    <img src="#" id="g" onclick="viewImage(this.id)"><br>
    </div>
    <div style="display: none;" id="second">
        <img src="" style="height: 500px;" id="view"><br>
        <button id="btn" onclick="back()">BACK</button>
    </div>

    </body>
    </html>

0 个答案:

没有答案