jQuery: якорь загружает страницу, а затем прокручивает в div - PullRequest
Новая
       4

jQuery: якорь загружает страницу, а затем прокручивает в div

1 голос
/ 10 сентября 2011

У меня есть одностраничный веб-сайт, который прокручивает до нужного раздела при переходе по ссылкам навигации - см. http://www.cleanupbritain.org для примера в реальном времени.

Сейчас я расширяю веб-сайт и добавляю блог, расположенный в подкаталоге. Я пытаюсь настроить навигацию по блогам, чтобы загрузить www.cleanupbritain.org, а затем перейти к нужному разделу. Это возможно? Я довольно новичок в jQuery, поэтому любая помощь будет принята с благодарностью.

Вот навигационная ссылка: 

<a href="http://www.cleanupbritain.org" onClick="goToByScroll('news')">News</a>

А вот сценарий, который я написал: 

<!-- ScrollTo for navigation scrolling -->
<script type="text/javascript">
jQuery(window).load(function() {
    function goToByScroll(id){
            jQuery('html,body').animate({scrollTop: $("#"+id).offset().top - 236},'slow');
    }
    function goToTop(){
            jQuery('html,body').animate({scrollTop: 0},'slow');
        }
});
</script>

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

Заранее большое спасибо за помощь,

Льюис.

1 Ответ

6 голосов
/ 10 сентября 2011

Навигационная ссылка должна указывать <a href="http://www.cleanupbritain.org/#news">News</a>

Теперь, если у новостного блока есть id="news", браузер автоматически перейдет к нему - для этого и созданы якоря. Если вам нужна анимация, тогда: 

<script type="text/javascript">
jQuery(window).load(function() {
    function goToByScroll(id){
       jQuery('html,body').animate({scrollTop: $("#"+id).offset().top - 236},'slow');
    }

    if(window.location.hash != '') {
        goToByScroll(window.location.hash.substr(1));        
});
</script>

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

...