JQuery: вызывать привязку при вызове URL, заменять поведение браузеров

Ответ 1

Если вы не создаете фактический якорь foo, а скорее создаете свой якорь с идентификатором типа _foo (что-то вроде <a id="_foo">). Для достижения этой цели вы можете обрабатывать $(document).ready.

Что-то вроде (псевдокод)

$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {
         $.scrollTo(elem.left, elem.top);
    }
});

Ответ 2

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

$(document).ready(function () {
    // replace # with #_ in all links containing #
    $('a[href*=#]').each(function () {
        $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    });

    // scrollTo if #_ found
    hashname = window.location.hash.replace('#_', '');
    // find element to scroll to (<a name=""> or anything with particular id)
    elem = $('a[name="' + hashname + '"],#' + hashname);

    if(elem) {
         $(document).scrollTo(elem, 800);
    }

});

Он меняет все привязки в ссылках, поэтому для пользователей без javascript поведение останется нетронутым.

Ответ 3

Ответ машины был очень полезен. Код, который я закрепил вместе, содержит параметр URL и превращает его в хэш-тег, который затем прокручивается браузером, как только DOM готов.

URL-адрес будет выглядеть так:

www.mysite.com/hello/world.htm?page=contact

Contact - это имя идентификатора, который требуется прокрутить до

<h1 id="contact">Contact Us</h1>

Здесь код:

// Get any params from the URL
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var url = decodeURIComponent(window.location.href);
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
 }
});

$(document).ready(function() {
    // Unhide the main content area
    $('section.centered').fadeIn('slow');

    // Create a var out of the URL param that we can scroll to
    var page = $.getUrlVar('page');
    var scrollElement = '#' + page;

    // Scroll down to the newly specified anchor point
    var destination = $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
});

Я проверил это в Chrome и FF, и он работал очень хорошо. Попробуйте настроить "destination-75", если цель прокрутки не подходит к тому месту, где вы хотите.

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

Ответ 4

/* scrolling to element */
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
    $('a').click(function(){
        var hashEle = $(this).attr('href').split('#');
        if (hashEle.length > 1) {
            if (hashEle[1] == 'top') {
                $('body, html').animate({
                    scrollTop: 0
                },500);
            } else {
            jQuery('body, html').animate({
                scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
            },500);
            }
        };
    })
        // find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
    if(hashname == 'top') {
    $('body, html').animate({
            scrollTop: 0
        },200); 
    } else {
     $('body, html').animate({
            scrollTop: $(elem).offset().top - headerHeight
        },500);
 }
};
/* END scrolling to element */

этот script должен быть в $(document).ready(function() {});

Ответ 5

Вы можете использовать ScrollTo. Вы хотели бы сделать страницу без привязок, а затем использовать JavaScript, который запускается при загрузке страницы, чтобы получить привязку из URL. Затем вы можете использовать этот текст для прокрутки до определенного идентификатора.

Не уверен, как получить элемент в середине страницы, но вы можете указать смещение для прокрутки.

Ответ 6

Я не хочу говорить, что это невозможно, но... это будет, по крайней мере, довольно сложно. Браузер (или, по крайней мере, все те, что мне известно) прокручивается до точки привязки, как только загружается эта часть страницы; AFAIK не существует Javascript-метода, чтобы этого избежать (вам нужен плагин для браузера или что-то в этом роде).

Однако, я думаю, вы могли бы использовать вариант "не показывать страницу до полной загрузки страницы" script, чтобы потенциально получить нужное поведение. Другими словами, вы бы:

• Скрыть всю предварительную загрузку содержимого страницы (т.е. иметь DIV, который обертывает всю вашу страницу, и нанести на него стиль "display: none" )

• Прикрепите обработчик событий onLoad на страницу, которая не скрывает ваш DIV, и...

• В этом же обработчике событий onLoad используйте стандартный механизм прокрутки JS (т.е. ScrollTo) для прокрутки до привязки (я думаю, вы сможете определить, какой якорь прокручивается, проверяя окно. местоположение)

В теории, потому что браузер будет прокручиваться браузером между # 1 и # 2 (и так как некуда прокручивать, что с скрытым контентом и всеми, я думаю, что это просто ничего не сделает) механизм прокрутки, который вы используете в # 3, не должен иметь никаких помех.

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

Ответ 7

что невозможно

изменить

поведение полностью находится в руках UA.