Прокрутите вверх код

Я хочу, чтобы когда пользователь нажимал на миниатюру в галерее, страница автоматически прокручивалась вверх. Вот код:

  <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>

web scroll photo
person user2077202    schedule 15.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас есть href в ваших тегах, установленный на само изображение. Разве это не просто загрузка изображения на собственной странице?

Вы можете использовать идентификаторы для таргетинга на определенные области вашей страницы для прокрутки.

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

More page content

<div id="someid">
    Content to scroll too
</div>
person Phil    schedule 15.02.2013
comment
да, он загружается на своей собственной странице, поэтому при нажатии на изображение оно должно загружаться, и в то же время страница должна прокручиваться вверх, это возможно? - person user2077202; 16.02.2013
comment
Я не уверен, что понимаю. Если изображение загружается в отдельном окне, не следует ли прокручивать его вверх этой новой страницы? - person Phil; 16.02.2013
comment
lashstudio.comuf.com/gallery.html это веб-сайт и галерея, возможно, вы понимать - person user2077202; 16.02.2013
comment
О, код, который вы указали выше, не соответствует тому, что есть в вашей ссылке. Я предполагаю, что ваши ссылки на сайте используют пронумерованные идентификаторы для переключения самого изображения? Я бы использовал JavaScript для обработки обеих функций (переключение изображения и прокрутка вверх). Тем не менее, я думаю, что это будет очень неприятно для пользователя, если ему придется продолжать прокручивать вниз, чтобы переключать изображения. Я бы посмотрел на другой вариант галереи слайд-шоу, который более удобен для пользователя. - person Phil; 16.02.2013