Scroll to top code

Question

I want that when the user clicks to the thumbnail on the gallery, page should scroll to top automatically. Here is the code:

  <div id="gallery" class="content">
                   <div class="wrapper">
                       <div class="slideshow-c``ontainer">
                            <div id="slideshow" class="slideshow"></div>
                        </div>
                    </div>
                </div>
                <div id="thumbs" class="navigation">
                    <h3>Gallery</h3>
                    <ul class="thumbs noscript">
                        <li>
                            <a class="thumb" href="images/slider-img1.jpg" title=""> <img src="images/page1-img1.jpg" alt="" /><span></span> </a>
                        </li> 
                        <li>
                            <a class="thumb" href="images/slider-img2.jpg" title=""> <img src="images/page2-img1.jpg" alt="" /> <span></span></a>
                        </li> 
                        <li>
                            <a class="thumb" href="images/slider-img3.jpg" title=""> <img src="images/page2-img2.jpg" alt="" /> <span></span></a>
                        </li> 
                        <li class="last">
                            <a class="thumb" href="images/slider-img4.jpg" title=""> <img src="images/page3-img1.jpg" alt="" /> <span></span></a>
                        </li>
                        <li>
                            <a class="thumb" href="images/slider-img5.jpg" title=""> <img src="images/page1-img2.jpg" alt="" /> <span></span></a>
                        </li> 
                        <li>
                            <a class="thumb" href="images/slider-img6.jpg" title=""> <img src="images/page1-img3.jpg" alt="" /> <span></span></a>
                        </li>
                        <li>
                            <a class="thumb" href="images/slider-img7.jpg" title=""> <img src="images/page1-img4.jpg" alt="" /><span></span> </a>
                        </li> 
                        <li class="last">
                            <a class="thumb" href="images/slider-img8.jpg" title=""> <img src="images/page1-img5.jpg" alt="" /> <span></span></a>
                        </li>  
                        <li>
                            <a class="thumb" href="images/slider-img9.jpg" title=""> <img src="images/page1-img6.jpg" alt="" /><span></span> </a>
                        </li> 
                        <li>
                            <a class="thumb" href="images/slider-img10.jpg" title=""> <img src="images/page1-img7.jpg" alt="" /> <span></span></a>
                        </li> 
                        <li>
                            <a class="thumb" href="images/slider-img11.jpg" title=""> <img src="images/page1-img8.jpg" alt="" /> <span></span></a>
                        </li> 
                        <li class="last">
                            <a class="thumb" href="images/slider-img12.jpg" title=""> <img src="images/page1-img9.jpg" alt="" /> <span></span></a>
                        </li>  
                        <li class="last2">
                            <a class="thumb" href="images/slider-img13.jpg" title=""> <img src="images/page1-img10.jpg" alt="" /> <span></span></a>
                        </li> 
                        <li class="last2">
                            <a class="thumb" href="images/slider-img14.jpg" title=""> <img src="images/page1-img11.jpg" alt="" /> <span></span></a>
                        </li>
                        <li class="last2">
                            <a class="thumb" href="images/slider-img15.jpg" title=""> <img src="images/page1-img12.jpg" alt="" /><span></span> </a>
                        </li> 
                        <li class="last last2">
                            <a class="thumb" href="images/slider-img16.jpg" title=""> <img src="images/page1-img13.jpg" alt="" /> <span></span></a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="block"></div>

score 0 · Answer 1 · answered Feb 15 '13 at 22:50

0

You have your href in your tags set to the image itself. Isn't that just loading the image on it's own page?

You can use ids to target specific areas of your page to scroll to.

<a href="#someid">Scroll</a>

More page content

<div id="someid">
    Content to scroll too
</div>

answered Feb 15 '13 at 22:50

Phil

1,849
4
24
38

yes,it loading on it's own page, so when the image is clicked it should load and at the same time the page should scroll to the top,is that possible? – user2077202 Feb 15 '13 at 22:53
I'm not sure I understand. If the image is loading in it's own window, should it not be scrolled to the top of that new page? – Phil Feb 16 '13 at 00:58
http://lashstudio.comuf.com/gallery.html this is the website and the gallery, maybe you will understand – user2077202 Feb 16 '13 at 10:09
Oh, the code you provided above doesn't match what your link has. I assume your hrefs on the site are using numbered ids in order to switch the image itself? I would use some JavaScript to handle both functions (switching the image and scrolling back to the top). That said, I think this will be very frustrating for a user if they have to keep scrolling back down to switch images. I would look into another slideshow gallery option that is more user friendly. – Phil Feb 16 '13 at 19:05

Scroll to top code

1 Answers1