jQueryを使用して単一のページの上部にスクロールする方法は？

onAppend関数で次のコードを使用して、ページの上部にスクロールします。この関数はonAppendイベントウィッヒは正常に動作しているので、私はちょうどスクロール機能を必要とする...jQueryを使用して単一のページの上部にスクロールする方法は？

を - 再生ボタンをクリックするとユーチューブのVIDが負荷に開始された後

スクロールが発動すべきです。今私はこのコードを私のすべての単一のWordpressの投稿に実装しようとしました。

編集：この場合、jQuery scroll to elementのソリューションは動作しません。したがって、「可能な重複」要求は無視する必要があります。例えば#single-post-wrapperにまたはのトップトップに -

var body = jQuery("html, body"); 
    body.stop().animate({scrollTop:0}, 500, function() { 
    // alert("Finished animating"); 
});

単一のポストのHTMLは

<html prefix="og: http://ogp.me/ns#" lang="en-US"> 
    <head>...</head> 
    <body class="post-template-default single single-post postid-880"> 
     <nav id="menu" class="xs-menu">....</nav> 
     <div id="single-post-wrapper" class="single-post-class"> 
     ... 
     </div> 
    </body> 
</html>

ようONLY Wordpressの中の単一のポストの最上部までスクロールする方法任意のアイデアを探します投稿全体？

出典

2017-12-20 evavienna

を参照してくださいですか？複数の投稿がHTML形式で表示される構造を表示できますか？彼らはラッパーを持っていますか？彼らはユニークなIDを持っていますか？あなたはそれらの中から、またはどこか他の場所からスクロールを完全に発射しますか？ IMHOはここできれいな答えのための必須事項です。今のところ推測しています。ページのトップになるのは、ページ全体のトップか、ちょうどポストのことですか？ – DanteTheSmith

@DanteTheSmith - 質問を更新します... – evavienna

あなたのアニメーションの周りにある状態を追加して、あなたが1つの投稿にあるかどうかを確認してください。 –

はidがラップ

  var id = "get your id here"; 
      jQuery("html, body").animate({ 
       scrollTop : jQuery(id).offset().top 
      }, 1800);

のおかげで、このコードを...してみてください！あなたはそれを渡すことによって要素にスクロールすることができます

出典

2017-12-20 14:00:19

Works - thx。たぶんあなたのIDを取得する前に＃を追加してください。最良の – evavienna

次のように、scrollTop：jQuery（id）.offset（）。top +（-100） ' – evavienna

をスクロールして、ターゲットIDのパディング/マージンが原因である可能性があります。 –

は$(selector).offset().top

としてオフセットトップウィンドウは、この作業スニペットあなたにスクロールしたく火を何に

$(".stop").on("click",function(e){ 
 
    $('html, body').animate({ 
 
\t \t scrollTop:0}, 'slow'); 
 
}); 
 

 

 
$(".spost").on("click",function(e){ 
 
    $('html, body').animate({ 
 
\t \t scrollTop:$("#single-post-wrapper").offset().top 
 
    }, 'slow'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body"> 
 
<button class="stop">scroll to top</button> 
 
    <button class="spost">scroll to single-post-wrapper</button> 
 
    
 
    <div class="post-template-default single single-post postid-880"> 
 
     <nav id="menu" class="xs-menu">menu</nav> 
 
     <br><br><br><br><br> 
 
     <div id="single-post-wrapper" class="single-post-class"> 
 
     single-post-wrapper<button class="stop">scroll to top</button> <br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text 
 
     </div> 
 
    </div> 
 
    
 
    
 
    <button class="stop">scroll to top</button> 
 
    <button class="spost">scroll to single-post-wrapper</button> 
 
    
 
</div>

出典

2017-12-20 14:06:45

thx - に対応しています。しかし、@aravindからの答えは完璧でした。ベスト – evavienna

jQueryを使用して単一のページの上部にスクロールする方法は？

答えて

関連する問題