2017-05-22 5 views
0

私はプログラマではありませんが、毎日HTML &のCSSを書き、JavaScriptとPHPを一緒に使うことができます。デザイナーが理解できるという点で答えを説明してください、ありがとう! :)ページアンカー用のjQueryスクリプトに要素IDフィルタを追加

私は私たちのサイトをより使いやすくするために取り組んでおり、私は固定ヘッダとさまざまなページアンカーに関する問題にぶつかってきました。滑らかなスクロールを作成し、固定ヘッダーの高さを調整するためのスクリプトを追加しました。問題は、私はWordPressのインストール上のVisual Composerのプラグインを使用していますし、私たちのタブ付きページ要素の一つは、新しいスクリプトで正常に動作していないということです。

https://newstart.staging.wpengine.com/treatment/mental-health/ocd/

底部付近にOCDサブタイプをチェック。サブタイプのタブアンカーリンクをクリックすると、タブのdivがヘッダーの後ろにジャンプします。スクリプトを追加する前に、要素は静的になり、通常はタブ間を移動します。

私は本当にこのスクリプトが必要なので、これらのタブリンクにクラスまたはIDフィルタを追加したいと思います。そうすれば、それらは完全にスクリプトから除外されます。私は.not()と:not()セレクタを試しましたが、成功しませんでした。ここでは、スクリプト(taken from here)されています

$('a[href^="#"]').on('click', function(e) { 
var hash = this.hash, 
    $hash = $(hash), 
    addHash = function() { 
     window.location.hash = hash; 
    }; 

if (hash !== '#header') { 
    $('html,body').animate({ 'scrollTop': $hash.offset().top -50 }, 500, addHash); 
} else { 
    $('html,body').animate({ 'scrollTop': $hash.offset().top }, 500, addHash); 
} 
e.preventDefault(); 
}); 

答えて

0

はそれを

$('a[href^="#"]').not($("#static a")).on('click', function(e) { 
var hash = this.hash, 
    $hash = $(hash), 
    addHash = function() { 
     window.location.hash = hash; 
    }; 

if (hash !== '#header') { 
    // $hash.velocity('scroll', { duration: 500, offset: -50, complete: addHash }); // Velocity.js 
    $('html,body').animate({ 'scrollTop': $hash.offset().top -150 }, 700, addHash); 
} else { 
    // $hash.velocity('scroll', { duration: 500, offset: 0, complete: addHash }); // Velocity.js 
    $('html,body').animate({ 'scrollTop': $hash.offset().top }, 700, addHash); 
} 
e.preventDefault(); 
}); 
を手に入れました
関連する問題