jQuery плавная прокрутка до якоря?

есть ли способ прокрутки вниз до якорной ссылки с помощью jQuery?

Как: 

$(document).ready(function(){
  $("#gotomyanchor").click(function(){
      $.scrollSmoothTo($("#myanchor"));
  });
});

?

12 61
javascript jquery

12 ответов:

вот как я делаю это:

    var hashTagActive = "";
    $(".scroll").on("click touchstart" , function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $('html,body').animate({
                scrollTop: dest
            }, 2000, 'swing');
            hashTagActive = this.hash;
        }
    });

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

<a class="scroll" href="#destination1">Destination 1</a>

Вы можете увидеть его на моем сайт.
Демо-версия также доступна здесь:http://jsfiddle.net/YtJcL/

120

Я бы использовал простой фрагмент кода из CSS-Tricks.com:

$(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;
      }
    }
  });
});

источник: http://css-tricks.com/snippets/jquery/smooth-scrolling/

45

лучшее решение я видел до сих пор : jQuery: плавная прокрутка внутренних якорных ссылок

HTML:

<a href="#comments" class="scroll">Scroll to comments</a>

сценарий:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});
36

jQuery.scrollTo будет делать все, что вы хотите и многое другое!

вы можете пройти все виды различных вещей:

  • количество сырья
  • строка ('44', '100px', '+=30px ' и т.д.)
  • элемент DOM (логически, дочерний элемент прокручиваемого элемента)
  • селектор, который будет относительно прокручиваемого элемента
  • строка ' max ' для прокрутки до конца.
  • строка, указывающая процент к прокрутите до этой части контейнера (например: 50% идет к * к середине).
  • хэш { top:x, left: y }, x и y могут быть любыми числами/строками, как показано выше.
12

вот код, который я использовал, чтобы быстро привязать jQuery scrollTo ко всем якорным ссылкам:

// Smooth scroll
$('a[href*=#]').click(function () {
    var hash = $(this).attr('href');
    hash = hash.slice(hash.indexOf('#') + 1);
    $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500);
    window.location.hash = '#' + hash;
    return false;
});
4

Я хотел версию, которая работала для <a href="#my-id"> и <a href="/page#my-id">

<script>        
    $('a[href*=#]:not([href=#])').on('click', function (event) {
        event.preventDefault();
        var element = $(this.hash);
        $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing');
    });
</script>
3

попробуйте этот. Это код из CSS трюков, которые я изменил, это довольно прямолинейно и делает как горизонтальную, так и вертикальную прокрутку. Нужен 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-10, scrollLeft:target.offset().left-10
        }, 1000);
        return false;
      }
    }
  });
});
2

используя сценарий хану Я создал функцию jQuery:

$.fn.scrollIntoView = function(duration, easing) {
    var dest = 0;
    if (this.offset().top > $(document).height() - $(window).height()) {
        dest = $(document).height() - $(window).height();
    } else {
        dest = this.offset().top;
    }
    $('html,body').animate({
        scrollTop: dest
    }, duration, easing);
    return this;
};

использование:

$('#myelement').scrollIntoView();

значения по умолчанию для продолжительности и ослабления составляют 400 мс и"качели".

1

я использовал в моем сайте это:

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 1200, 'swing', function () {
        window.location.hash = target;
    });
});

});

вы можете изменить скорость прокрутки, изменив "1200", который я использовал по умолчанию, он довольно хорошо работает на большинстве браузеров.

после ввода кода между <head> </head> тег вашей страницы, вам нужно будет создать внутреннюю ссылку в вашем <body> - тег: 

<a href="#home">Go to Home</a>

надеюсь, что это помогает!

Ps: Не забудьте звоните:

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

0

я использовал плагин Плавная Прокрутка, at http://plugins.jquery.com/smooth-scroll/. С помощью этого плагина все, что вам нужно включить, это ссылка на jQuery и код плагина:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>

(ссылки должны иметь класс smoothScroll для работы).

еще одна особенность Плавная Прокрутка это имя ancor не отображается в URL-адресе!

0

работает

$('a[href*=#]').each(function () {
    $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    $(this).on( "click", function() {

        var hashname = $(this).attr('href').replace('#_', '');

        if($(this).attr('href') == "#_") {
            $('html, body').animate({ scrollTop: 0 }, 300);
        }
        else {
            var target = $('a[name="' + hashname + '"], #' + hashname),
                targetOffset = target.offset().top;
            if(targetOffset >= 1) {
                $('html, body').animate({ scrollTop: targetOffset-60 }, 300);
            }
        }
    });
});
0

Я ненавижу добавлять классы с именами функций в свой код, поэтому я собрал это вместе. Если бы я перестал использовать плавную прокрутку, я бы чувствовал себя обязанным пройти через мой код и удалить все материалы class="scroll". Используя эту технику, я могу прокомментировать 5 строк JS и все обновления сайта. :)

<a href="/about">Smooth</a><!-- will never trigger the function -->
<a href="#contact">Smooth</a><!-- but he will -->
...
...
<div id="contact">...</div>


<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    // Smooth scrolling to element IDs
    $('a[href^=#]:not([href=#])').on('click', function () {
        var element = $($(this).attr('href'));
        $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing');
        return false;
    });
</script>

требования:
1. <a> элементы должны иметь атрибут href, который начинается с # и быть больше, чем просто #
2. Один элемент на странице с соответствующим

Что он делает:
1. Функция использует значение href для создания anchorID объект
   - В примере это $('#contact'),/about начинается с /
2. HTML и BODY анимируются до верхнего смещения anchorID
   - speed = ' normal '('быстрый',' медленный', миллисекунды, )
   - ослабление = 'качели' ('линейные' и др... Гугл ослабление)
3. return false -- это мешает браузер от показа хэша в URL
   - скрипт работает и без него, но это не так"гладкий".

0