Material Design Lite и jQuery, что-то не так с плавной прокруткой

Вчера я задал аналогичный вопрос здесь.

И плавная прокрутка сработала.
Однако когда я ее использовал, с плавной прокруткой что-то не так.

Код находится здесь (этот репозиторий включает 1 файл html и 1 файл изображения):
https://github.com/MitsuhikoShimomura/mdl-error

Некоторые важные части кода.
Гладкая прокрутка:

<script>
  $(function(){
    $("a.smooth").click(function(e){
            e.preventDefault();
            var speed = 500;
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var nav_height = $(".mdl-layout__header-row").height();
            var position = target.offset().top - nav_height;
            $(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
            return false;
        });
    });
</script>

Содержимое тела:

<div class="layout-transparent mdl-layout mdl-js-layout">
    <header class="mdl-layout__header mdl-layout__header--transparent">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Sample</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link smooth" href="#0">0</a>
                <a class="mdl-navigation__link smooth" href="#1">1</a>
                <a class="mdl-navigation__link smooth" href="#2">2</a>
                <a class="mdl-navigation__link smooth" href="#3">3</a>
                <a class="mdl-navigation__link smooth" href="#4">4</a>
            </nav>
        </div>
    </header>

    <!--Main contents -->
    <main class="mdl-layout__content">
        <ul class="ul-test">
            <li id="0">0</li>
            <li id="1">1</li>
            <li id="2">2</li>
            <li id="3">3</li>
            <li id="4">4</li>
        </ul>
    </main>
</div>

Правильная прокрутка
---Когда плавная прокрутка начинается "сверху", прокрутка работает правильно.
---Однако, если целью прокрутки является "сверху", прокрутка работает правильно.

  • С «топа» на «№1»
  • От "верхнего" до "#3"
  • От "№2" до "топ"
  • так далее..

Неправильная прокрутка
--- Когда плавная прокрутка не начинается "сверху", прокрутка работает неправильно.
--- Когда позиция выхода и позиция прибытия совпадают, прокрутка не работает неправильно.

  • От «№1» до «№2»
  • От "№2" до "№4"
  • От «№3» к «№3»
  • так далее..

Я понятия не имею, почему плавная прокрутка работает неправильно.


javascript html jquery material-design-lite
person Mitsuhiko Shimomura    schedule 17.08.2015    source источник
comment
Я думаю, вам следует добавить важные части кода непосредственно к вашему вопросу.   -  person m02ph3u5    schedule 17.08.2015
comment
@ m02ph3u5 Спасибо! я обновил.   -  person Mitsuhiko Shimomura    schedule 17.08.2015

Ответы (2)


arrow_upward
4
arrow_downward

Решение этой проблемы находится здесь:
http://qiita.com/gonshi_com/items/33ac3df3ed98352c96b6#comment-87ad66f44229688fb638

jQuery ".offset()" не может получить правильную позицию с помощью свойства "масштабирования" css.

Решение таково:

var target = $( '#target' ).offset().top;

↓

var target = $( '#target' ).get( 0 ).offsetTop
person Mitsuhiko Shimomura    schedule 18.08.2015

arrow_upward
0
arrow_downward

У Мицухико Шимомура был правильный ответ, я просто хотел объединить код для большей ясности. Мне пришлось добавить - 130 к .offsetTop, потому что плавная прокрутка проходила мимо моего целевого идентификатора в html. Спасибо вам за помощь! См. мое приложение, в котором я использовал эту функцию плавной прокрутки.

И не забудьте добавить плавный класс к якорям в html, как это

<a class="smooth" href="#scrollToId">Target</a> 
<div id="scrollToId">Target</div>

$(function(){
    $('a.smooth').click(function(){
        console.log("SMOOTH BEGIN");
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.get( 0 ).offsetTop - 130;
        $(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
        console.log("SMOOTH END");
    });
});
person Ian Poston Framer    schedule 03.06.2016