Элемент прокрутки вверху страницы, щелкнув элемент привязки внутри элемента или где угодно внутри, содержащий div id

Я хотел бы прокрутить страницу до вершины, например. идентификатор навигационного div при нажатии любой из ссылок внутри идентификатора div навигации или (если возможно) при нажатии в любом месте в самом идентификаторе div, содержащем ссылки навигации.

Я исследовал это, и ближайший, к которому я пришел, - jQuery - Как прокрутить привязку в верхней части страницы при нажатии? однако по какой-то причине это похоже, не работает, когда я пытаюсь сделать это в моем примере. Что я делаю не так?

Я новичок в jQuery и medium в html и css (и использовал встроенный стиль divs, так как я не хотел предоставлять отдельный CSS только для примера).

Когда я загружаю html и script из jQuery - как прокручивать якорь в верхней части страницы при нажатии? в Aptana он также не прокручивает, Даже с содержимым div над работой класса div, чтобы было свободное место для прокрутки.

Я включил два небольших абзаца внутри соответствующих div, чтобы точно объяснить, что я имею в виду.

Любая помощь очень ценится. Спасибо.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
        $('#scroll_navigation ul li').click(function() {
             $('html,body').animate({scrollTop: $(this).offset().top}, 800);
        }); 
    </script>

<body>

<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>

    <div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">

        <p>Scroll navigation to top of page</p>
        <p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>


            <div id="navigation">

                <div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">

                    <ul>
                        <p>Catch clicks on anchors to scroll the div id to the top of the page</p>
                        <li><a href="#Portfolio" title="">Portfolio</a></li>
                        <li><a href="#Services" title="">Services</a></li>
                        <li><a href="#About" title="">About</a></li>
                        <li><a href="#Contact" title="">Contact</a></li>
                    </ul>

                </div>

            </div>

    </div>

<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>

</body>

ИЗМЕНИТЬ Остерегайтесь этого при использовании scrollTop в Firefox. Анимация scrollTop не работает в firefox jQuery scrollTop - поддержка отрицательных значений в Mozilla/Firefox Потребовал мне время, чтобы понять, что мой код был хорош, но scrollTop был этой проблемой в FF. В этом же примере можно наблюдать и поведение. При прокрутке вниз и фиксации привязок FF будет прокручиваться до случайных позиций либо на 2-4px до, либо после целевого div.

Теперь я использую Scrolld.js для достижения идеальной прокрутки пиксела до требуемых точек в основных браузерах. Я не понимаю, как разные браузерные механизмы могут отображать такую ​​общую вещь, как scrollTop, из разных (или html или body) входов, насколько я понимаю, и я новичок в jQuery. Угадайте, что это не "ошибка" jQuery, а то, как браузеры делают рендеринг scrollTop.

Ответы

Ответ 1

Я не знаю, если вы это сделали, но вы должны включить jquery, чтобы использовать его. Другое дело, что ваш "прослушиватель кликов" должен быть в состоянии готовности к работе в jqueries следующим образом:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $('#scroll_navigation ul li').on('click', function(){
        $('html,body').animate({scrollTop: $(this).offset().top}, 800);
    }); 
});  

</script>