Запретить прокрутку из тегов привязки - PullRequest
Новая
       27

Запретить прокрутку из тегов привязки

2 голосов
/ 05 февраля 2012

Я делаю простую навигацию с помощью jQuery, который загружает области содержимого, показывая или скрывая их на странице.Я использую теги привязки, чтобы определить, какую панель показывать.Я также использую функцию «готово» для отображения элемента #hash при загрузке страницы.Довольно просто: 

$(document).ready(function() {
  $('#video_form_content > div').hide();
  var showTab = window.location.hash || "#basic-info";
  $(showTab).show();
}

$('#video_form_tabs li').on('click', function() {
    $('#video_form_content > div').hide();
    var target = $(this).children('a').attr('href');
    $(target).show();
})

Что происходит, однако, это то, что при нажатии элементов страница переходит к вершине цели div.Я не хочу этот переход, но я хочу сохранить функциональность по умолчанию тега привязки в том смысле, что я хочу, чтобы хеш был добавлен к URL, чтобы обновление открыло ту же вкладку.

Вот чтоЯ пробовал

  • Добавление $(window).scrollTop(0) к событию click.Я думал, что может, но это событие срабатывает перед фактической навигацией элемента привязки, поэтому он немедленно отменяется.
  • Добавление $(window).scrollTop(0) к $(document).ready() Однако этот слушатель не срабатывает при нажатии на якорь длята же страница.
  • Добавление window.location.hash = target или window.location.href = target к событию щелчка.Тем не менее, это все еще вызывает повторную отправку страницы, и она все еще «скачет».
  • Добавление return false в функцию.Это предотвращает добавление хэша к URL-адресу, что крайне желательно.

Это действительно сбивает меня с толку, и любая помощь будет принята с благодарностью.

Ответы [ 4 ]

3 голосов
/ 01 октября 2012

Если вы хотите сохранить хеш в URL, вам нужно добавить его вручную 

e.preventDefault(); // stop browser from following href
var url = $(this).prop('href'); // get href
var hash = url.split('#'); // get the hash-part
if(hash.length > 1) location.hash = hash[1]; // rewrite the url

Я только что проверил это в Chrome, и он прекрасно работает там.

2 голосов
/ 14 марта 2013

Мой метод состоит в том, чтобы добавить общий класс для интерактивных элементов, а затем выполнить setTimeout с таймаутом 0. В моем случае я добавил класс "top" для моих интерактивных элементов. 

$(".top").click(function(){
    setTimeout(function(){
        window.scrollTo(0, 0);
    }, 0);
})

Вы можете установить координаты x и y так, как вам нравится: 

scrollTo(X, Y);

Быстро и просто!

Сделайте это, чтобы сохранить текущую позицию прокрутки: 

$(".top").click(function(){
    var position = $(document).scrollTop();
    setTimeout(function(){
        window.scrollTo(0, position);
    }, 0);
})
1 голос
/ 05 февраля 2012

Вы должны прикрепить событие к якору и отменить обработчик события по умолчанию: 

$(document).ready(function() {
  $('#video_form_content > div').hide();
  var showTab = window.location.hash || "#basic-info";
  $(showTab).show();
}

$('#video_form_tabs li a').on('click', function(e) {
    e.preventDefault(); // stop browser from following href
    $('#video_form_content > div').hide();
    var target = $(this).attr('href');
    $(target).show();
})
1 голос
/ 05 февраля 2012

Определите вашу цель div с такими вещами, как #basic-info-TAB, затем добавьте "-TAB" в переменную target.

...