2

Пытаюсь сделать навигацию по всем правилам, т.е. что бы не брать id каждого пункта меню, вносить его в код, и с помощью jq опускать страницу до нужно высоты. Я пытаюсь сделать так: взял css якоря и с помощью их пытаюсь ПЛАВНО опустить страницу JS

window.onload = function(){
                var item = document.getElementById("main_nav_ul").children;
                for( var i = 0; i < item.length; i++){
                    $(item[i]).click(function(){
                        alert(this.item);
                    });
                    //console.log(item);
                };
                //alert(item[0]);
            }

HTML

#top,#top_but,#middle,#footer,#copyright{
                margin-top: 500px;
                display: block;
            }
<div class="wrap">
       <div class="main_nav">
            <ul id="main_nav_ul">
                <li><a href="#top">Самый верх</a></li>
                <li><a href="#top_but">Верх</a></li>
                <li><a href="#middle">Середина</a></li>
                <li><a href="#footer">Подвал</a></li>
                <li><a href="#coryright">Копирайт</a></li>
            </ul>
        </div>         
               <a name="top" id="top">Самый верх</a>
               <a name="top_but" id="top_but">Верх</a>
               <a name="middle" id="middle">Середина</a>
               <a name="footer" id="footer">Подвал</a>
               <a name="coryright" id="copyright">Копирайт</a>
    </div>

Логика моих мыслей - я беру #main_nav_ul, в item попадает htmlcollection, с помощью for я делю коллекцию на массивы. А вот дальше что то идёт не так. А точнее как узнать что например именно на второй li пользователь нажал?

PS прошу не давать готовых решений, а подсказать именно ответ на мой вопрос или поправить логику мышления.Очень хочется сделать самому.

UPDATE

        window.onload = function(e){
            var item = document.getElementById("main_nav").children;
            for( var i = 0; i < item.length; i++){
                $(item[i]).click(function(){
                    e.preventDefault();
                    //var distance = document.getElementsByTagName(this).offsetLeft;
                    var distance = this.offsetLeft;
                    //window.scrollTo(0,distance);
                    console.log(distance);
                });
            };
        }
5
  • Так прокиньте в функцию клика переменную (i+1) - это и будет номер лишки
    – Anon
    2 окт 2015 в 13:15
  • @anon эээээ......что? 2 окт 2015 в 13:19
  • Зачем перемешивать JQ и нативный JS? Используйте либо то, либо другое. Вот пример для JQ jsfiddle.net/L1tumn9c
    – Anon
    2 окт 2015 в 13:29
  • @Anon спасибо,буду дальше думать 2 окт 2015 в 13:34
  • А что значит "alert(this.item);"? this - это есть item[i] - у него нет свойства "item". Можно сделать alert(this), alert(this.firstElementChild.href) и т.д., но this.item - в данном случае undefined.
    – artbataev
    2 окт 2015 в 18:20

1 ответ 1

1

Необязательно вешать обработчик на каждый элемент, можно делегировать события.

$('#main_nav_ul').click(function(event){
  if (event.target.tagName.toLowerCase() === 'a') {

  }  
});

Далее выбираем нужный нам элемент по хэшу в ссылке, в вашем случае это может быть id или атрибут name. Анимируем скролл до блока.

$(document).ready(function(){
    $('#main_nav_ul').click(function(event){
        if (event.target.tagName.toLowerCase() === 'a') {
            var target = $(event.target.hash);
            target = target.length ? target : $('[name=' + event.target.hash+ ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 2000);
                return false;
            }
        }  
    });
})

Результат: http://jsfiddle.net/n9zesmL0/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.