ホームページ > ウェブフロントエンド > htmlチュートリアル > htmlページの配置、位置を指定(ポイントを一時的に整理し、後でより良いものがあれば変更します)_html/css_WEB-ITnose

htmlページの配置、位置を指定(ポイントを一時的に整理し、後でより良いものがあれば変更します)_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:00:52
オリジナル
1530 人が閲覧しました

ページが少し長いので、ページをクリックしてみたらうまくいきました。ページの位置決め、2 つの状況: 1. ページ A がページ B にジャンプし、ページ上の任意の場所にスクロールします。 2. ページ内のページが長すぎるため、位置決めが必要です。

状況 1:

まずアンカー ポイント

<body><a href="b.html#pos" target="_blank">点击跳转</a><body>
ログイン後にコピー

を作成し、次にこのアンカー ポイント

をページ B に定義します。 🎜>

<body><div name="pos" id="pos"></div></body>
ログイン後にコピー

互換性を高めるため、名前と ID の両方を同時に記述します。

ケース 2:

1 アンカーポイントの使い方


2 jQuery の aminate メソッド


 <body> <script type="text/javascript"> function click_scroll() {  var scroll_offset = $("#pos").offset();  //得到pos这个div层的offset,包含两个值,top和left  $("body,html").animate({   scrollTop:scroll_offset.top  //让body的scrollTop等于pos的top,就实现了滚动   },0);   //0是代表移动的时间,1000代表1秒 } </script> <input type="button" value="点击button跳转" onclick="click_scroll();" /> <div id="pos">滚动到这里</div><body>
ログイン後にコピー

3 フォーカスを使用します。

<a href="javascript:void(0)" document.getElementById('abc').focus();">快速定位1</a> //让abc获取焦点
ログイン後にコピー


4 位置決めを行うには、scrollIntoView メソッドを使用します。

<a href="javascript:void(0)" onclick="document.getElementById('am').scrollIntoView();">快速定位1</a>
ログイン後にコピー

5 は window.location.hash を通じて実装されます:

個人的な好みは Jquery のアミネートとうまく機能します。結局のところ、それはアニメーション化可能です。
<a href="javascript:void(0)" onclick="window.location.hash='am'">快速定位2</a>
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート