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

Question

Я уже знаю плагин jQuery ScrollTo, но до сих пор не нашел способа реализовать следующее:

Пользователи попадают на мой сайт (печатая, НЕ нажимая на ссылку на моей странице) domain.com/bla.php#foo

и якорь "#foo" существует. Теперь я хочу, чтобы браузер пользователя НЕ автоматически прокручивал до «#foo», вместо этого я хочу плавно прокручивать его так, чтобы элемент «#foo» находился примерно в середине представления, а НЕ в абсолютной верхней позиции просмотр пользователями.

спасибо, пока!

Answer 1

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

Нечто подобное (псевдокод)

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

Answer 2

Я сделал некоторые улучшения для скрипта от 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 поведение остается неизменным.

Answer 3

/* 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 */

этот скрипт должен быть в $ (document) .ready (function () {});

Answer 4

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

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

www.mysite.com/hello/world.htm?page=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, и это сработало очень хорошо. Попробуйте настроить «назначение-75», если цель прокрутки не идет в то место, куда вы хотите.

Я не смог бы сделать это без постов выше, так что спасибо!

Answer 5

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

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

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

2. Присоедините обработчик события «onLoad» к странице, которая скрывает ваш DIV, и ...

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

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

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

Answer 6

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

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

Answer 7

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

редактировать

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