2016-08-05 2 views
1

私はここで見つかったコードを使用しました:scroll a full page height up or down with jQuery/Javascript DIV IDを 'page1'それは一度に全ページをスクロールする。JS/JQを使用してサイトのフルページをスクロールする - ウェブボタンを使用したときの動作をオーバーライドする方法

これはうまくいきますが、すべてのスクロールを「引き継ぎます」。ユーザーにCTAボタンを押しさせ、3ページ下にスクロールさせる必要があります。しかし、それは3ページを下にスクロールし、2をバックアップします(これは '現在のページ+ 1'なので)。

はここでフルページスクロールを強制するためのコードです:

var pages = 7; 
var currentpage = 1; 
if (document.location.hash) { currentpage = parseInt(document.location.hash.replace('#', '')); } 

var nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; } 
var prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; } 

var animatingup = false; 
var animatingdown = false; 

jQuery(window).scroll(function(event) { 

if (animatingup==true) { return; } 
if (animatingdown==true) { return; } 
nextpage = currentpage + 1; if (nextpage > pages) { nextpage = pages; } 
prevpage = currentpage - 1; if (prevpage < 1) { prevpage = 1; } 

if (animatingup == false) { 
    if (jQuery(window).scrollTop()+jQuery(window).height()>=jQuery("#page"+(nextpage)).offset().top+50) { 
     if (nextpage > currentpage) { 
      var p2 = jQuery("#page"+(nextpage)); 
      var pageheight = p2.position().top; 
      animatingdown = true; 
      jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;}); 
      return; 
     } 
    } 
} 

if (animatingdown == false) { 
    if (jQuery(window).scrollTop()<=jQuery("#page"+(currentpage)).offset().top-50) { 
     if (prevpage < currentpage) { 
      var p2 = jQuery("#page"+(currentpage)); 
      var pageheight = p2.position().top-jQuery(window).height(); 
      animatingup = true; 
      jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = prevpage; animatingup = false; document.location.hash = currentpage;}); 
      return; 
     } 
    } 
} 
}); 

私は、私はちょうどこれを変更するには、/ DIV ID番号をページを強制できると思っていた:

jQuery('#ctabut').click(function(){ 
    currentpage = 6; 
}); 

が、それはまだにスクロールDIV ID「page7」を入力してバックアップします。どのようなアイデアはa)フルページをスクロールするためのより良い方法b)ボタンクリックでスクロールを無効にする方法c)ホームページ(それはワードプレスサイトです)でJSコードを実装する方法 - 本当に感謝します。

これは唯一の開発者サイトですので、指摘できません。私のコードスキルは非常に限られているので、私は簡単だと私に話すことができます:)

答えて

0

よく、私はフォーラムに頼って、それを解決します。

私はこれで私の「ボタンコード」のjQueryを交換する場合:

jQuery('#ctabut').click(function(){ 
    var p2 = jQuery("#page7"); 
    var pageheight = p2.position().top; 
    animatingup = true; 
    jQuery('html, body').animate({ scrollTop: pageheight }, 800, function() { currentpage = 7; animatingup = false; document.location.hash = 7;}); 
}); 

それが適切にすべての変数を設定し、「立ち直る」防止します。

fullpage.jsのようなあらかじめ用意された大きなライブラリを使わずに自分のシンプルな「全ページスクロール」を作成したいと思っている人はnoobとして誰でも投稿します

関連する問題