0

I am designing an online shopping website, where many product images are listed. When prodcut image is clicked, the larger view of the product image appears(for this I have used javascript). Then there is a BACK button. When the BACK button is clicked the scroll position of the page changed to recent scroll position. But I want to get the previous scroll position where I clicked the product image. Please help me... thank you.

Here is a SAMPLE CODE for my problem

    <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>
Saptarshi Mazumder
  • 31
  • 3
  • 8
  • 1
    Grab the ``x`` and ``y`` position of the image that was clicked in your function ``viewImage()`` and pass those values to ``window.scrollTo`` in your function ``back()``. Easy peasy. Use this question to get coordinates: http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element – Ditto Feb 27 '17 at 21:42
  • give me the code to do that – Saptarshi Mazumder Feb 28 '17 at 06:36
  • Please somebody say me how to I pass scroll location vales from viewImage() function to back() function. – Saptarshi Mazumder Mar 02 '17 at 13:28

0 Answers0