web-dev-qa-db-ja.com

URLに＃なしのアンカー付きスクロール

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の変更を避ける方法は？

javascripthtmlhash
22
mayank

JQueryのアニメーションを使用して、Jeff Hinesからこの回答を受け取ります。

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

JQueryを使用している場合は、プロジェクトにライブラリを追加することを忘れないでください。

編集：また、必ず「falseを返す」ようにしてください。それ以外の場合は、リンクのクリックハンドラーで「＃div1」をURLに追加します（@niaccurshiに感謝）

42
henser

scrollIntoViewは、他のすべての方法が失敗したときに最高の仕事をしました！

document.getElementById('top').scrollIntoView(true);

どこ 'top'は、行きたいhtmlタグのIDです。

22
stallingOne

あなたの人生を楽にして、以下を試して、他に何かあれば教えてください;-)

_<div>top</div>
<div style="height: 800px;">&nbsp;</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);"で遊ぶだけで十分です。

良い一日を過ごしてください！

5
mknayab

リフオフ ヘンサーの答え 、window.location.hashはすでに設定されており、ユーザーはページの上部（ハッシュリンクがある場所）にスクロールして戻ります。

ハッシュは既に設定されているため、次の方法でそのリンクをクリックすると再配置できます。

$(window).scrollTop($('a[name='+id+']').offset().top);
2
dhc

このコードをドキュメントの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;
      }
    }
  });
});
1
Saygın Karahan

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>

[〜＃〜] demo [〜＃〜]

リファレンス： https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

0
Manoj Selvin

私は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);
    });
})
0
edsonski