slideUp/Down с использованием jquery из одной части страницы в другую

Question

Я пытаюсь использовать эффекты SlideUp и Down для перехода между разделами одной и той же веб-страницы. В принципе, я создал

Мой код для HTML, CSS и JQuery можно увидеть на jsfiddle: (http://jsfiddle.net/dbartolome/2s0jy72q/1/)

$("#work").click(function(){ 
    event.preventDefault(); 
    $("header").slideDown(700); 

Update: Я нашел то, что называется прокрутки на якорь в Интернете. Что ты думаешь? Я не понимаю часть их кода. Это их jsfiddle: (http://jsfiddle.net/BjpWB/4/)

function scrollToAnchor(aid){ 
    var aTag = $("a[name='"+ aid +"']"); 
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); 
    } 

    $("#link").click(function() { 
    scrollToAnchor('id3'); 
    }); 

Я потерялся с содержанием для функции scrollToAnchor (помощь)

Answer 1

Получить позицию секции со смещением и анимировать scrollTop до верхней точки элемента

$('a').on('click', function(e){ 
    e.preventDefault(); 
    var targetID = $(this).attr('href') 
    var elementPosition = $(targetID).offset().top 
    $('html,body').animate({scrollTop: elementPosition},'slow'); 
}); 

jsFiddle Example

Он работает вверх или вниз, так что вы можете использовать это, чтобы добавить «Назад Наверх»ссылка

<header id="top">...</header> 

Просто ссылку на #top

<a href="#top">Back to top</a> 

В примере, и над кодом, обратите внимание, что href звена является id от того, где она прокручивается к

---

в коде Jquery, он принимает href из нажатого a и выбирает элемент с идентификатором равный ему. Затем код находит верхнюю точку смещения элемента с этим идентификатором и анимирует scrollTop.

Ссылки

• animate() - используется для CSS свойств анимации, а также найти scrollTop объяснение в там
• attr() - используется для получения значения href
• offset() - используется, чтобы найти верхнюю позицию элемент в пределах области документа.
• on() - используется для прослушивания за клик перед выполнением свитки - такое же, как click()

Answer 2

Вы можете использовать теги HREF называть идентификаторы части, которые вы хотите показать.

$('a').on('click', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $(link).slideUp(700); 
}); 

Это будет использовать «#» из вашей ссылки, как «#», необходимые для вашего выбора тегов ID.

Это будет работать лучше всего, если вы дадите класс только те тэгам, которые вы будете использовать, а также поместите их в свой jquery-вызов этим тегам. В противном случае. Вы остановите действие по умолчанию для всех ваших тегов.

$('a.myClass').on('click', function(e){ 

Я изменил .click к .ON, потому что это гораздо чище способ связывания событий в вашей функции и позволяет гибко для вас вниз по дороге.

$ (this) в функции ссылается на конкретный тег, который вы нажимаете.

И наконец, при использовании селекторов для поиска элемента с идентификатором и id вы хотите быть уверенным и использовать '#' перед именем id и '.' перед именем класса.

ОТВЕТ НА ВОПРОС

Вы можете использовать 'работать' вместо этого. Слова «link» и «work» - это просто переменные. Таким образом, вы можете называть его так, как хотите, но это ничего не изменит, если вы используете то же имя, где бы вы ни захотели использовать информацию, содержащую эту переменную. Вы можете назвать его x или z, и он все равно будет работать.

Часть, которая действительно имеет значение, равна переменной. В созданной мной функции переменная равна ссылке, которую вы сохранили в теге href любой ссылки, которую вы нажимаете.

Если вы нажмете ссылку «работа» в навигационной системе, переменная «link» равна «#work», потому что это значение вашего href в этом элементе навигации. Аналогично, если вы затем нажмете на следующий элемент навигации, переменная 'link' будет тогда равна href внутри этого элемента.

Причина, по которой я использовал, заключается в том, чтобы разрешить вам писать меньше кода в долгосрочной перспективе и не возвращаться и редактировать эту функцию jquery при добавлении на вашу страницу дополнительных ссылок на ваш навигатор и другие разделы.