私はすでにjQueryプラグインScrollToを知っていますが、これまで次のことを実現する方法が見つかりませんでした。
ユーザーは私のサイトにアクセスします（私のページのリンクをクリックするのではなく、入力することによって）domain.com/bla.php#foo
アンカー「#foo」が存在します。ここで、ユーザーのブラウザが自動的に「#foo」にスクロールしないようにします。代わりに、要素「#foo」がビューのほぼ中央にあり、絶対的な最上部の位置にないようにスムーズにスクロールします。ユーザーが表示します。
これまでのところありがとう！
実際のアンカーを作成するのではなく、 （のような）のようなfooIDでアンカーを作成する場合。あなたはこれを達成するためにを扱うことができます。_foo<a id="_foo">$(document).ready
（擬似コード）のようなもの
$(document).ready(function() {
var elem = $('#_' + window.location.hash.replace('#', ''));
if(elem) {
$.scrollTo(elem.left, elem.top);
}
});
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を使用していないユーザーの場合、動作は変更されません。
/* 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（）{}）;に入れる必要があります。
Machineghostの答えはとても役に立ちました。一緒にパッチを適用したコードは、URLパラメータを取得し、それをハッシュタグに変換します。このハッシュタグは、DOMの準備が整うとすぐにブラウザがスクロールします。
URLは次のようになります。
www.mysite.com/hello/world.htm?page=contact
連絡先は、スクロール先のIDの名前です
<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」を調整してみてください。
上記の投稿がなければできなかったので、ありがとう！
ScrollToは引き続き使用できます。アンカーを含まないページをレンダリングしてから、ページの読み込み時に実行されるJavaScriptを使用して、URLからアンカーを取得することをお勧めします。次に、そのテキストを使用して特定のIDまでスクロールできます。
ページの中央にあるアイテムを取得する方法はわかりませんが、スクロールのオフセットを指定できます。
これが不可能だとは言いたくありませんが...少なくともかなり難しいでしょう。ブラウザ（または少なくとも私が知っているすべてのブラウザ）は、ページのその部分が読み込まれるとすぐにアンカーポイントまでスクロールします。AFAIKには、これを回避するJavascriptベースの方法はありません（ブラウザプラグインなどが必要です）。
ただし、「ページが完全に読み込まれるまでページを表示しない」スクリプトの変形を使用して、必要な動作を実現できる可能性があると思います。言い換えれば、次のようになります。
ページのコンテンツのプリロードをすべて非表示にします（つまり、ページ全体をラップするDIVを用意し、それに「display：none」スタイルを設定します）
DIVを再表示するページに「onLoad」イベントハンドラーをアタッチし、...
同じ「onLoad」イベントハンドラーで、標準のJSスクロールメカニズム（つまり、ScrollTo）を使用してアンカーまでスクロールします（window.locationをチェックすることで、スクロールするアンカーを決定できると思います）。
理論的には、ブラウザは＃1と＃2の間をブラウザでスクロールするため（スクロールする場所がないため、コンテンツが非表示になっていると、まったく何も起こらないと思います）、スクロールメカニズム＃3で使用するものは干渉しないはずです。
そうは言っても、上記のすべては完全にテストされていない計画です。あなたのマイレージはさまざまです。それが機能したとしても、実装するのは面倒です。したがって、この動作が本当に必要でない限り、問題を起こす価値はほとんどありません。
このコードを試してみてください。jQueryを使用するだけで完全に機能します。
$(document).ready(function() {
var target = window.location.hash;
var offset = 85; // You can change this value as per your need.
if ($(target).length > 0) {
$('html, body').animate({
scrollTop: $(target).offset().top - offset
}, 1000);
} else {
console.warn('Element ' + target + ' does not exist');
}
});
if(window.location.hash) {
var hash = window.location.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1500, 'swing');
}
これは私にとってはうまくいきます。
それは可能ではありません
編集
動作は完全にUAの手に委ねられています。