Сброс прокрутки вверх при нажатии на главную ссылку

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я настраиваю веб-страницу. Я не программист, но смог перемещаться по нему с разумным успехом. Моя проблема заключается в следующем — у меня есть часть веб-страницы (Div), которая имеет прокручиваемый текст с использованием свойства Overflow . Я могу вернуть текст наверх с помощью привязки к началу страницы, однако, когда я нажимаю на ссылку, которую я настроил для возврата в «Home», она делает это, но не сбрасывает полосу прокрутки наверх. Может кто-нибудь сказать мне, как включить страницу, чтобы я мог нажать «Home» И сбросить полосу прокрутки до верха? Спасибо.

Вот код, который я использую.

Привязка к началу страницы =

 <a name="pgtop"></a>

Div, ссылающийся на якорь, включая стиль =

 <div class="rtop"><a href="#pgtop">Return To Top</a></div>

Ссылка внизу страницы, выбирающая «Home» — довольно стандартный материал =

 <div class="footerlinks"><a href="#">Home</a></div>

Заранее спасибо.

1. Похоже, код отсутствует.

2. где ваш код?? мы не сможем помочь вам с вашей проблемой, если мы не видим ваших усилий до сих пор

3. Я ввел его, но он не отображается. Есть идеи?

4. Вы не отформатировали свой код. Я думаю, что кто-то еще делает это сейчас.

5. Пожалуйста, также опубликуйте свой CSS или JSFiddle было бы здорово

Ответ №1:

Попробуйте добавить функцию щелчка javascript к вашей ссылке. Обратите внимание на мою ссылку в этом примере под названием «прокрутка вверх». Он вызывает функцию с именем «scrollUp ()». Эта функция захватывает ваш div по идентификатору и устанавливает прокрутку в начало.

Просто добавьте этот скрипт на свою страницу и измените идентификатор, чтобы он соответствовал идентификатору вашего div. Затем добавьте «OnClick» к вашей ссылке привязки. Я отредактировал ответ, чтобы он соответствовал опубликованному вами коду.

 <html>
     <head>
          <style type="text/css">
          div.rtop {
            width:100px;
            height:100px;
            overflow:scroll;
           }
          </style>
     </head>
    <body>
        <a name="pgtop"></a>
        <div class="rtop" id="somediv">You can use the overflow property when you want to have better control of the layout. The default value is visible.
            <a href="#pgtop" onClick="scrollUp()">Return To Top</a>
        </div>
    </body>
</html>

<script>
function scrollUp(){
    var myDiv = document.getElementById('somediv');
    myDiv.scrollTop = 0;
    }
</script>

Ответ №2:

как я уже упоминал в комментарии:

в вашей ссылке внизу href="#" означает, что текущие страницы вверху (это не сдвинет вашу прокрутку divs — прокручиваются только документы)…попробуйте href="?" перезагрузить текущую страницу или href="http://url.to.your.home.page" поместить ссылку, которая загружает вашу домашнюю страницу, если ваша текущая страница не является домашней страницей, на которую вы хотите перейти.

вот некоторые справочные документы, если вы хотите узнать больше

http://www.w3schools.com/html/html_links.asp

Ответ №3:

просто добавьте этот jquery, и все готово.

 $('html, body').animate({
    scrollTop: $("pgtop").offset().top
}, 2000);