anchor tag
を使用してページをスクロールする必要があります。
今私はやっています:
<a href="#div1">Link1</a>
<div id='div1'>link1 points me!!</div>
Link1をクリックすると正常に機能し、ページはid "div1"のdivまでスクロールします。
ポイントは、#div
をクリックすると、Link1
をサフィックスとして使用するURLを変更したくないということです。
アンカーhrefで試してみました
void(0);
そして
location.hash='#div1';
return false;
e.preventdefault;
URLの変更を避ける方法は?
JQueryのアニメーションを使用して、Jeff Hinesからこの回答を受け取ります。
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
JQueryを使用している場合は、プロジェクトにライブラリを追加することを忘れないでください。
編集:また、必ず「falseを返す」ようにしてください。それ以外の場合は、リンクのクリックハンドラーで「#div1」をURLに追加します(@niaccurshiに感謝)
scrollIntoView
は、他のすべての方法が失敗したときに最高の仕事をしました!
document.getElementById('top').scrollIntoView(true);
どこ 'top'
は、行きたいhtmlタグのIDです。
あなたの人生を楽にして、以下を試して、他に何かあれば教えてください;-)
_<div>top</div>
<div style="height: 800px;"> </div>
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div>
_
FYI: 1行または1行のhref="javascript:void(0);" onclick="window.scroll(0,1);"
で遊ぶだけで十分です。
良い一日を過ごしてください!
リフオフ ヘンサーの答え 、window.location.hash
はすでに設定されており、ユーザーはページの上部(ハッシュリンクがある場所)にスクロールして戻ります。
ハッシュは既に設定されているため、次の方法でそのリンクをクリックすると再配置できます。
$(window).scrollTop($('a[name='+id+']').offset().top);
このコードをドキュメントのjqueryにのみ追加します
参照: http://css-tricks.com/snippets/jquery/smooth-scrolling/
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^/ / , '') == this.pathname.replace(/^/ / , '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
URLにdiv idを追加せずに、アンカー、ボタンなどを含むアイテムクリックにスムーズスクロールを追加します。
情報:scrollIntoViewOptions(オプション){動作:「自動」| 「インスタント」| 「スムーズ」、ブロック:「開始」| "終わり"、 }
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({
block: 'start',
behavior: 'smooth'
});
}
#userdiv {
margin-top: 200px;
width: 200px;
height: 400px;
border: 1px solid red;
}
<button onclick="scrollSmoothTo('userdiv')">
Scroll to userdiv
</button>
<div id="userdiv">
Lorem ipsum this is a random text
</div>
リファレンス: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
私は4年遅れだと知っていますが、皆さんもこれを試すことができます。
HTML:
<a href="#div1">Link1</a>
<!-- you can put <br />'s here to see effect -->
<div id='div1'>link1 points me!!</div>
<!-- <br />'s here, too, to see effect -->
JavaScript/jQuery
$(document).ready(function(){
$('a').on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 900);
});
})