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

Я немного усовершенствовал сценарий Яна Чонбума, и теперь он выглядит так:

$(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

Ответ 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, и все сработало очень хорошо.Попробуйте настроить «destination-75», если цель прокрутки не попадает в то место, куда вы хотите.

Без постов выше я бы не справился, так что спасибо!

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

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

Answer 5

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

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

Answer 6

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

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

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

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

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

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

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

Answer 7

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

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

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