HTML5/jQuery — вертикальное скольжение страниц

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

Я не могу найти название для этой техники, мой поиск по вертикальному скольжению страниц не дал того, на что я надеялся.

На Tumblr.com есть что-то подобное, но это не совсем то, что я ищу. http://www.w3.org/html/logo также имеет что-то подобное, единственный здесь отсутствует меню, следующее вниз, когда страница прокручивается.

Может ли кто-нибудь помочь мне пролить свет на это? Или привести примеры?

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


html jquery sliding
person oliverbj    schedule 15.03.2012    source источник
comment
Вы смотрели на скрипты страниц, которые вы видели. Это должно помочь вам создать собственное решение.   -  person Sven Bieder    schedule 15.03.2012

Ответы (4)


arrow_upward
2
arrow_downward

Все, что вам нужно сделать, это получить вертикальное смещение элемента, к которому вы хотите прокрутить, а затем анимировать свойство scrollTop для элемента window (или любого другого элемента, который вы прокручиваете):

//bind to all links whose `href` attribute starts with a hash
$('a[href^="#"]').on('click', function () {

    //get the offset from the document's top for the element targeted in the links `href` attribute
    var offset = $($(this).attr('href')).offset().top;

    //scroll the document, some browsers use `html`, some use `body`
    $('html, body').stop().animate({ scrollTop : offset }, 1000);
});

Вот демонстрация: http://jsfiddle.net/wCgA7/1/

Обратите внимание, что если вы укажете навигацию position:fixed, вы можете прикрепить ее к верхней части окна просмотра.

person Jasper    schedule 15.03.2012

arrow_upward
0
arrow_downward

Найдите плагин scrollTo. http://flesler.blogspot.com/2007/10/jqueryscrollto.html

person romainberger    schedule 15.03.2012

arrow_upward
0
arrow_downward

Чтобы узнать о меню «Following», посмотрите фиксированное позиционирование. Элементы CSS position: fixed всегда

оставаться на том же месте относительно окна просмотра, после прокрутки

person calebds    schedule 15.03.2012
comment
Я понимаю! Большое спасибо. Однако один вопрос. Я вижу, что фиксированные элементы.. фиксированные.. Но как я могу сделать эффект, что когда экран становится выше, фиксированные элементы прилипают к верху страницы. С эффектом Jquery. Если вы понимаете, о чем я. - person oliverbj; 15.03.2012

arrow_upward
0
arrow_downward

Я использовал модифицированную версию этого кода JQuery:

// animate to anchor link
$('nav a').click(function() {
   $('nav li').removeClass('selected');
   $(this).parent().addClass('selected');
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 500);
   return false;
});  
// update active links on scroll
$(window).scroll(function(){
    var pos = $(window).scrollTop();
    var height =  $(window).height();

    $('nav li').each(function(){
        if( ( pos >= $(this).offset().top )){
            $('nav li').removeClass();
            $(this).addClass('selected');                  
        }
    });
});
person Zach Lysobey    schedule 15.03.2012