URLに＃を付けずにアンカーでスクロール

Question

anchor tagを使用してページをスクロールする必要があります。

今私がやっている：私はリンク1、ID「DIV1」とのdivにページスクロールをクリックしたとき

<a href="#div1">Link1</a> 

<div id='div1'>link1 points me!!</div> 

これが正常に動作します。
Link1をクリックした後に、URLを変更する必要はありません。#divを接尾辞として使用します。

私は、URLを変更することを避けるためにどのように

void(0); 

と

location.hash='#div1'; 
return false; 

e.preventdefault; 

としてアンカーのhrefを試してみましたか？

Answer 1

はjQueryのアニメーションを使用したジェフ・ハインズからこの答えを取る：

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

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

編集：また、まだ「偽を返す」ことを確認してください。リンクのクリックハンドラで、それ以外の場合は、あなたのURLに "＃div1"を追加します（thanks @niaccurshi）

Answer 2

あなたの人生を楽にしてください、次のことを試してみてください。 ）

<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つだけです/単一行href="javascript:void(0);" onclick="window.scroll(0,1);"で遊んでする必要があり、それはあなたのために働きます。

良い一日を！

Answer 3

のみ文書準備

参考にjqueryのにこのコードを追加します。henserの答えをオフリフ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; 
     } 
    } 
    }); 
}); 

Answer 4

、私はwindow.location.hashがすでに設定されている場合、ユーザーを持っています次にページの先頭にスクロールします（ハッシュリンクがあります）。ハッシュがすでに設定されているので、あなたがして、そのリンクをクリックすると上に再配置でき

：すべての他の方法が失敗したとき

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

Answer 5

scrollIntoViewは最高の仕事をしてくれました！

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

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

Answer 6

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