Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.11.2014, 12:31
Новичок на форуме
Отправить личное сообщение для Айратиус Посмотреть профиль Найти все сообщения от Айратиус
 
Регистрация: 12.11.2014
Сообщений: 2

Доработать простой код на JS
Всем доброго дня. Данный скрипт изменяет пункт меню по якорю. якорь в HTML задан следующим образом.
<li><a href="#foo">Foo</a></li>
но если ссылка типа такого, то уже не работает скрипт
<li><a href="index.php#foo">Foo</a></li>
Пожалуйста допишите JS код. В нем вообще не соображаю.
Вместо index.php может быть абсолютно любая страница, но при этом скрипт должен работать корректно.
Вот источник http://jsfiddle.net/mekwall/up4nu/А вот мой код полностью
Код:
!doctype html><head>

 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>

</head>

 

<style>

body {

    height: 6000px;

    font-family: Helvetica, Arial;

}

 

#top-menu {

    position: fixed;

    z-index: 1;

    background: white;

    left: 0;

    right: 0;

    top: 0;

}

 

#top-menu li {

    float: left;

}

 

#top-menu a {

    display: block;

    padding: 5px 25px 7px 25px;

    width: 4em;

    text-align: center;

    -webkit-transition: .5s all ease-out;

    -moz-transition: .5s all ease-out;

    transition: .5s all ease-out;

    border-top: 3px solid white;

    color: #aaa;

    text-decoration: none;

}

 

#top-menu a:hover {

    color: #000;

}

 

#top-menu li.active a {

    border-top: 3px solid #333;

    color: #333;

}

 

#foo {

    position: absolute;

    top: 400px;

}

 

#bar {

    position: absolute;

    top: 800px;

}

 

#baz {

    position: absolute;

    top: 1200px;

}

</style>

 

 

 

 

 

 

<script type="text/javascript">

 

 

 

jQuery(document).ready(function($) {

 

                        // Cache selectors

        var lastId,

                topMenu = $("#top-menu"),

                topMenuHeight = topMenu.outerHeight()+15,

                // All list items

                menuItems = topMenu.find("a"),

                // Anchors corresponding to menu items

                scrollItems = menuItems.map(function(){

                  var item = $($(this).attr("href"));

                  if (item.length) { return item; }

                });

        

        // Bind click handler to menu items

        // so we can get a fancy scroll animation

        menuItems.click(function(e){

          var href = $(this).attr("href"),

                  offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;

          $('html, body').stop().animate({ 

                  scrollTop: offsetTop

          }, 400);

          e.preventDefault();

        });

        

        // Bind to scroll

        $(window).scroll(function(){

           // Get container scroll position

           var fromTop = $(this).scrollTop()+topMenuHeight;

           

           // Get id of current scroll item

           var cur = scrollItems.map(function(){

                 if ($(this).offset().top < fromTop)

                   return this;

           });

           // Get the id of the current element

           cur = cur[cur.length-1];

           var id = cur && cur.length ? cur[0].id : "";

           

           if (lastId !== id) {

                   lastId = id;

                   // Set/remove active class

                   menuItems

                         .parent().removeClass("active")

                         .end().filter("[href=#"+id+"]").parent().addClass("active");

           }                   

        });

                

 

                });

 

 

</script>

 

<body>

    <ul id="top-menu">

      <li class="active">

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

      </li>

      <li><a href="#foo">Foo</a></li>

      <li>

        <a href="#bar">Bar</a>

      </li>

      <li>

        <a href="#baz">Baz</a>

      </li>

    </ul>

    

    <a id="foo">Foo</a>

    

    

    <a id="bar">Bar</a>

    

    

    <a id="baz">Baz</a>

</body>
Ответить с цитированием
  #2 (permalink)  
Старый 13.11.2014, 05:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Айратиус
$(this).attr("href")
А нефиг юзать атрибуты.
Есть же this.hash , который будет содержать именно якорь (включая саму решетку)

По поводу разметки - между <head> и <body> не должно быть никаких тегов. Если <head> закрылся, и дальше встречается любой тег - принудительно открывается <body>, поэтому когда встретится еще один <body> - это будет ошибкой парсинга. Также <style> может быть только в <head> (кроме style[scoped] ). И хотя парсер все распарсит в любом случае, и даже виду не подаст - лучше делать все как надо.

Скрипты кстати лучше в конец body перенести - отображение страницы ускорится.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 13.11.2014, 07:05
Новичок на форуме
Отправить личное сообщение для Айратиус Посмотреть профиль Найти все сообщения от Айратиус
 
Регистрация: 12.11.2014
Сообщений: 2

Сообщение от danik.js Посмотреть сообщение
А нефиг юзать атрибуты.
Есть же this.hash , который будет содержать именно якорь (включая саму решетку)

По поводу разметки - между <head> и <body> не должно быть никаких тегов. Если <head> закрылся, и дальше встречается любой тег - принудительно открывается <body>, поэтому когда встретится еще один <body> - это будет ошибкой парсинга. Также <style> может быть только в <head> (кроме style[scoped] ). И хотя парсер все распарсит в любом случае, и даже виду не подаст - лучше делать все как надо.

Скрипты кстати лучше в конец body перенести - отображение страницы ускорится.
Сможете предоставить рабочий код? В JS вообще ничего не знаю...
Ответить с цитированием
  #4 (permalink)  
Старый 13.11.2014, 07:59
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

this.hash
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 13.11.2014, 08:00
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Айратиус
Сможете предоставить рабочий код? В JS вообще ничего не знаю...
Тут на форуме есть раздел "работа". Это как раз для тех, кто ничего не знает и не пытается узнать - т.е. просто хочет готовый результат.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Преобразовать код JQUERY в JS nattt Общие вопросы Javascript 2 30.04.2014 07:01
Помогите доработать JS script westnord Общие вопросы Javascript 8 14.07.2013 18:38
Простой код в Сафари не работает kvv77 Javascript под браузер 1 12.12.2012 01:39
Помогите редактировать js код despod1996 Общие вопросы Javascript 2 08.07.2012 09:43
Управляющие конструкции js и код php antserg Общие вопросы Javascript 2 11.06.2011 11:38