2016-11-10 7 views
0
<a href="#scrollDown" id="up">Scroll Down</a> 
<p>Long Paragraph.</p> 
<a name="scrollDown" id="down">Stop Here</a> 

私はidを '上に'クリックしている間、下にスクロールして '下に' idで停止する必要があります。ページのURLを変更せずにコンテンツにスクロール

「id」をクリックすると、URLが変更されています。たとえば、(../ loginAction#scrollDown)。

ページURLを変更せずにIDを「下に」スクロールする方法。 href 'scrollDown'はページURLには適用されません。

+0

[ページの特定の要素に移動するにはどうすればいいですか?](http://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page) – nikjohn

+0

だからあなたは何を試しましたか? – Justinas

+0

[URLに#がないアンカーでスクロールする]の複製があります(http://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url) – GiuServ

答えて

1

これは、要素のオフセットを取得してスクロールすることで可能です。

var elementPosition = document.getElementById('#myElement').offsetTop; 
window.scrollTo(0, elementPosition); 
1

hrefタグを使用すると、urlが変更されます。 あなたはアップダウンリンク用のIDタグを使用することができますし、jQueryの$(「#アップ」)を使用することができます。それは、HREFの値であるため、

1

$(function() { 
 
    $('#up').click(function(){ 
 
    $('html, body').animate({ 
 
     scrollTop: $("#down").offset().top 
 
    }, 2000); 
 
}); 
 
    
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<a href="javascript:void(0)" id="up">Scroll Down</a> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p> 
 
    <br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p> 
 
    v 
 
    <br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p><br> 
 
<p>Long Paragraph.</p> 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
<a name="scrollDown" id="down">Stop Here</a> 
 

 
</body>

+0

jQueryの代わりにJSが必要です。 –

1

をクリックし、URLが変更されますリンクの属性。デフォルトでは、ブラウザはURLハッシュのIDでdivを探し出してスクロールしているので、asdf.com/#someidは常に#someid divがページ上部に表示されます。 URLの変更を避け、同じ機能を使用するには、トリガーのカスタム属性を使用できます。

<p custom-target="scrollDown" id="up">Scroll Down</p> 
<p>Long Paragraph.</p> 
<a name="scrollDown" id="down">Stop Here</a> 

、その後、あなたはそれがもうリンクされるために必要がないので、私はpにトリガー要素を変更していますp[custom-target="scrollDown"] のクリックをリッスンするために、あなたのスクロールスクリプトを変更します。

関連する問題