jquery прокрутка к элементу не работает - прокрутки к случайным местам

Есть много вопросов о стеке, связанных с этим, но я не мог найти свой ответ. У меня есть этот яваскрипта код:jquery прокрутка к элементу не работает - прокрутки к случайным местам

$(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 

     $('html,body, .main').animate({ 
      scrollTop: $(this.hash).offset().top - 10 
     }, 1000); 

     }); 
    });

И это мой HTML-код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <!--[if gt IE 8]><!--><link rel="stylesheet" href="styles.css"><!--<![endif]--> 
    <link rel="stylesheet" href="common.css"> 
    <script src="responsive-nav.js"></script> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <script src="scripts/extraScripts.js"></script> 

    </head> 
    <body> 

    <div role="navigation" id="foo" class="nav-collapse"> 
     <ul> 
     <li class="active"><a href="#section1">Inicio</a></li> 
     <li><a href="#section2">Equipo</a></li> 
     <li><a href="#section3">Sistemas</a></li> 
     <li><a href="#section4">Desarrollo</a></li> 
     </ul> 
    </div> 

<div role="main" class="main"> 

    <a href="#nav" class="nav-toggle">Menu</a> 

    <div class = "section" id = "section1" > 

     <!-- some stuff --> 

    </div> 

    <div class = "section" id = "section2"> 

     <!-- some stuff --> 

    </div> 

    <div class = "section" id = "section3"> 

     <!-- some stuff --> 

    </div> 

    <div class = "section" id = "section4" > 

      <!-- some stuff --> 
    </div> 

</div> 

<script> 
    var navigation = responsiveNav("foo", {customToggle: ".nav-toggle"}); 
</script> 

    </body> 

</html>

Так я использую шаблон я нашел в Интернете. У него есть модное меню слева, а затем основное содержимое посередине. Все внутри:

<div role="main" class="main"> </div>

Я хочу, чтобы, когда ссылка на меню нажата, она прокручивается к конкретным разделам (# section1, # section2, # section3, # Раздел 4). Сейчас он работает в первый раз, когда я нажимаю на одну из ссылок, но во второй раз он идет в случайное место.

Любые подсказки, почему это может произойти?

--- UPDATE ----

Я пытался все решения упомянутых и он не работает. Я думаю, что это связано с CSS, который у меня есть для основного контейнера (класс .main). Посмотрите на код (я взял этот код из библиотеки, я использую):

.main { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-overflow-scrolling: touch; 
    padding: 3em 4em; 
    position: fixed; 
    overflow: hidden; 
    overflow-y: scroll; 
    border-top-left-radius: 5px; 
    box-shadow: 0 0 15px rgba(0,0,0, .6); 
    top: .8em; 
    right: 0; 
    bottom: 0; 
    width: 76%; 
    background: #fff; 
} 

.main::-webkit-scrollbar { 
    -webkit-appearance: none; 
    background-color: rgba(0,0,0, .15); 
    width: 8px; 
    height: 8px; 
} 

.main::-webkit-scrollbar-thumb { 
    border-radius: 0; 
    background-color: rgba(0,0,0, .4); 
}

Я попытался удалить код CSS выше, и с помощью этого и она работает:

$(function() { 
     $('a[href*=#]:not([href=#])').click(function() { 

     $('html,body, .main').animate({ 
      scrollTop: $(this.hash).offset().top - 10 
     }, 1000); 

     }); 
    });

Но мне нужно что CSS. Любой ключ, как я могу это исправить?

источник

2015-04-10 Erick

'this' в' $ (this.hash) 'является' html/body', а не ''. Храните его в переменной выше анимации, а затем передайте значение. –

Ваш код работает правильно https://jsfiddle.net/rwfLn6vy/ с достаточной высоты тела – Mihail

@Mihail не работает. Я думаю, что это связано с CSS, который у меня есть для моего меню (внешний код). Я отправлю код сейчас – Erick

Ваша проблема заключалась в том, что у вас был странный вызов контекста ссылки, нажатой $(this.hash). Изменение на that = $(this) за пределами закрытой решены проблемы.

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    var that = $(this); 
    $('html,body, .main').animate({ 
     scrollTop: that.offset().top - 10 
    }, 1000); 

    }); 
});

Вот Plunker

Позже !!

источник

2015-04-10 18:10:30 netrevisanto

Не работает. Я думаю, что это связано с CSS, который я использую для своего меню. Я отправлю код CSS сейчас – Erick

jquery прокрутка к элементу не работает - прокрутки к случайным местам

ответ

Смежные вопросы