リンクをクリックしてトップページにスクロールしないようにするにはどうすればよいですか？

私はあなたはそれが自動的に一番上に画面をスクロールするリンクをクリックしたとき、私はそれを避けるために作ることができるか疑問JSFiddleリンクをクリックしてトップページにスクロールしないようにするにはどうすればよいですか？

$(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); 
 
     event.preventDefault(); 
 
     } 
 
    } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.min.css"> 
 

 
</head> 
 

 
<body> 
 
    <div style="background-color:red; height: 1000px"> 
 
    LINK AT THE BOTTOM 
 
    </div> 
 
    <div class="collapse" id="work-exp-collapse"> 
 

 
    <div>TEST HIDDEN DIV HELLO!!</div> 
 

 
    </div> 
 
    <div style="margin: 0 auto; text-align: center; display: block"> 
 
    <i aria-hidden="true" class="fa fa-chevron-down yarrow"></i> <a aria-controls="work-exp-collapse" aria-expanded="false" class="aa-gray-line SeeMore2" data-toggle="collapse" href="#work-exp-collapse">view more experience</a> 
 
    </div> 
 

 
</body> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<!-- Recpatcha Google --> 
 
<script src="https://www.google.com/recaptcha/api.js"> 
 
</script> 
 
<!--JS below--> 
 

 
</html>

に次のコードを持っています隠されたdivが現れる同じ位置にとどまるのではなく、ページの「jQueryのオフセット座標を取得してサポートしていません：ドキュメントから...あなたはただクリックすることにより、非崩壊のdivの内容を確認するために、自動スクロールしたい

を想定し

おかげ

出典

2017-02-03 Anonymous

私は[jsfiddle]（https://jsfiddle.net/ddy3353q/4/）を更新した、ちょうど '$（ 'htmlの、ボディ'）コメントアウトアニメーション。（{ scrollTop：target.offset（）。先頭へ }、1000）; 'line –

原因はtarget要素がまだ表示されていないため、target.offset().topは0です。

shown.bs.collapse（Boostrapによって打たれた、link）を聞いて隠されたdivが表示されるのを待って、スクロールします。

if (target.length) { 
    target.one('shown.bs.collapse', function() {   
     $('html, body').animate({ 
     scrollTop: target.offset().top 
     }, 1000); 
    }); 
    event.preventDefault(); 
    }

デモ：https://jsfiddle.net/ddy3353q/5/

出典

2017-02-04 06:50:56

こんにちは。すべての返信ありがとうございます。私は少し混乱しています。私は最高のjsではありません。私はどうしたらいいですか？ –

JSコードに上記のブロックコードを '6'行から' 11'行に置き換えます。または、ここでデモをチェックするかもしれません：https://jsfiddle.net/ddy3353q/5/ –

こんにちはそれはそのリンクで動作しますが、残りの通常のアンカーリンクは機能しません。私がそれらをクリックすると、＃に行きません。私はhttps://jsfiddle.net/ddy3353q/6/ を更新しました。通常のリンクを追加しました –