Я уже знаю плагин jQuery ScrollTo, но до сих пор не нашел способа реализовать следующее:
Пользователи добираются до моего сайта (набрав, НЕ, щелкнув ссылку на моей странице) domain.com/bla.php#foo
и существует якорь "#foo" . Теперь я хочу, чтобы браузер пользователя НЕ автоматически прокручивался до "#foo" , вместо этого я хочу плавно прокручивать так, чтобы элемент "#foo" находился посередине представления и НЕ на абсолютной верхней позиции просмотра пользователей.
спасибо до сих пор!
Если вы не создаете фактический якорь foo, а скорее создаете свой якорь с идентификатором типа _foo (что-то вроде <a id="_foo">). Для достижения этой цели вы можете обрабатывать $(document).ready.
Что-то вроде (псевдокод)
$(document).ready(function() {
var elem = $('#_' + window.location.hash.replace('#', ''));
if(elem) {
$.scrollTo(elem.left, elem.top);
}
});
Я сделал некоторое улучшение для 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 поведение останется нетронутым.
Ответ машины был очень полезен. Код, который я закрепил вместе, содержит параметр 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", если цель прокрутки не подходит к тому месту, где вы хотите.
Я не мог бы сделать это с вышеприведенными сообщениями, поэтому спасибо!
/* 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() {});
Вы можете использовать ScrollTo. Вы хотели бы сделать страницу без привязок, а затем использовать JavaScript, который запускается при загрузке страницы, чтобы получить привязку из URL. Затем вы можете использовать этот текст для прокрутки до определенного идентификатора.
Не уверен, как получить элемент в середине страницы, но вы можете указать смещение для прокрутки.
Я не хочу говорить, что это невозможно, но... это будет, по крайней мере, довольно сложно. Браузер (или, по крайней мере, все те, что мне известно) прокручивается до точки привязки, как только загружается эта часть страницы; AFAIK не существует Javascript-метода, чтобы этого избежать (вам нужен плагин для браузера или что-то в этом роде).
Однако, я думаю, вы могли бы использовать вариант "не показывать страницу до полной загрузки страницы" script, чтобы потенциально получить нужное поведение. Другими словами, вы бы:
Скрыть всю предварительную загрузку содержимого страницы (т.е. иметь DIV, который обертывает всю вашу страницу, и нанести на него стиль "display: none" )
Прикрепите обработчик событий onLoad на страницу, которая не скрывает ваш DIV, и...
В этом же обработчике событий onLoad используйте стандартный механизм прокрутки JS (т.е. ScrollTo) для прокрутки до привязки (я думаю, вы сможете определить, какой якорь прокручивается, проверяя окно. местоположение)
В теории, потому что браузер будет прокручиваться браузером между # 1 и # 2 (и так как некуда прокручивать, что с скрытым контентом и всеми, я думаю, что это просто ничего не сделает) механизм прокрутки, который вы используете в # 3, не должен иметь никаких помех.
При этом все вышеперечисленное является полностью непроверенным планом; ваш пробег мой меняется. Даже если это сработает, будет больно реализовать, поэтому, если вы не действительно не хотите этого поведения, это почти наверняка не стоит проблем.
что невозможно
изменить
поведение полностью находится в руках UA.