тег привязки и атрибут имени анимированная прокрутка

Question

Я сделал это http://jsfiddle.net/thilakar/WsxJy/3/, используя теги привязки и атрибуты имени.

, но мне нужно использовать jquery, как показано нижеhttp://www.jibevisuals.com/

при нажатии на страницу меню «о нас» медленно перемещается вверх.Мне нужна такая работа.

Любое предложение

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

Answer 1

Описание

Вы можете сделать это, используя jQuery.offset() и jQuery.animate().

Ознакомьтесь с демонстрацией jsFiddle .

Пример

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

Дополнительная информация

• jsFiddle Демонстрация
• jQuery.offset ()
• jQuery.animate ()

Answer 2

Вы можете использовать jQuery Animate :

    var $root = $('html, body');
    $('a').click(function() {
    if ($.attr(this, 'href').indexOf("#")!=-1&&$.attr(this, 'href')!="#")
    {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    }
    });

Так что, если вы используете следующую ссылку:

<a href="#home"></a>

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

<a id="home"></a>

он будет плавно перемещаться к тегу привязки.

Этот бесплатный плагин меню jQuery работает с этим методом: PageScroll Плагин меню jQuery

Answer 3

Вы имеете в виду, как это -> http://css -tricks.com / examples / SmoothPageScroll / # source-code ?

Answer 4

Snake Eyes ответ является наиболее динамичным вариантом, поскольку вам не нужно кодировать каждый тег в js.Все, что клиент должен сделать, это использовать решение HTML, лучше для управления CMS.

Этот небольшой фрагмент кода - все, что вам нужно (ну, конечно, и jQuery)

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
    

Даже естьрешение для stickymenu в верхней части страницы, обратите внимание, чтобы заменить #main_menu на id или класс вашего меню:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var height_menu = $("#main_menu").css("height");
            height_menu = parseInt(height_menu,10);

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                scrollTop: target.offset().top - height_menu
                }, 1000);
                return false;
            }
        }
    });
});