• jQueryでアンカーポイントにスムースにスクロールしたい#

  • JUNK Reply #1, 2 years, 11 months ago

    Reply
    アンカーポイントにリンクするページを作りましたが、
    MODxでは同一ページ内のアンカーにリンクすることができないということで、

    http://modxcms.com/extras/package/?package=41  にて
    Base URL Same-Page-Link Fixをダウンロードして使用しています。

    更にアンカーポイントまでスムーズなスクロールがしたいということで、
    下記の方のようなの方のようなスクリプトを使用して、アンカーポイントまでスムーズにスクロールさせるようにしました。
    http://coliss.com/articles/build-websites/operation/javascript/296.html

    通常サイトの作り方(MODxを通さない静的な作り)で、サーバー内の任意の場所にこのスクリプトを置き、htmlの中にスクリプトを参照させます。
    するとMacでもWinでもIEでもFFでもスムーズにスクロールするのですが、
    MODxテンプレートにhtmlの中にスクリプトを参照させ、jsファイルはassets/js以下に置いたのですが
    どうにもスムーズにスクロールしません。
    スムーズスクロールはいろいろな方がやっていらっしゃるので上記の方も含め3種類のスクリプトを試してみました。
    その全てが同じ結果です。
    ということはMODxが何かしていると思うのですが、下記の方はちょっとおかしいながらもうまくいっている方もいるようです。

    http://blog.cyber-support.info/archives/20080530-1.html

    正直なところ、私自身は元々デザイナーで、プログラムは全くわからないという者で、jQueryも調べてきてコピペしているだけです。
    スムーススクロールだけの問題ではなく、その他のjQueryなどそのようなことがあるのでしょうか?
    アコーディオンなど、今後使いたいスクリプトもあります。
    アドバイスいただけないでしょうか。
    よろしくお願いいたします。


  • JUNK Reply #2, 2 years, 11 months ago

    Reply
    書き忘れました。
    当方の環境は、テスト環境としてMacにて
    MySQL 4.1.22、php 5.2.1、MODx0.9.6.3を使用しています。
    よろしくお願いします。


  • MEGU Reply #3, 2 years, 11 months ago

    Reply
    以下の部分だけですが。。
    アンカーポイントにリンクするページを作りましたが、
    MODxでは同一ページ内のアンカーにリンクすることができないということで、
    [~[*id*]~]#abc
    これでやれることとは意味が違うのでしょうか。外してたらすみません。。


  • JUNK Reply #4, 2 years, 11 months ago

    Reply
    質問がわかりにくかったようです。大変申し訳ありません。

    まず、最初に書いた下記の部分
    http://modxcms.com/extras/package/?package=41 にて』がおかしなアドレスになってしまっているようです。

    正しくは
    http://modxcms.com/extras/package/?package=41
    です。
    『Base URL Same Page Link Fix』というプラグインを使用して、同一ページへのアンカーへリンクできるようにしたプラグインです。
    これでDWで作ったそのままのタグで、アンカーポイントへリンクできるようになりました。

    質問はその先で、リンク先に突然移るのではく、アンカーポイントまでするすると上へ行ったり下へ行ったりというものです。
    それが
    http://coliss.com/articles/build-websites/operation/javascript/296.html

    http://moto-mono.net/2008/12/23/jqueryslidescrolljs.html

    http://redline.hippy.jp/lab/misc/jquery1.php

    の方が書かれているようなスクリプトです。
    このスムーズスクロールをしたいのですが、MODxを通すとできなくなります。
    最初にも書きましたように、静的な作りですと動作します。
    よろしくお願いします。


  • sama55 Reply #5, 2 years, 11 months ago

    Reply
    「Base URL Same-Page-Link Fix」は使ったことがないのですが以下の点が気になりました。外してたらごめんなさい。

    1.プラグインの実行順序
     生成されるHTML(ページ内アンカー)にパス的な問題がある場合は、onWebPagePrerenderイベントのプラグインの実行順序を変えるとどうなるか。

    2.jQuery
     パスは正しいのに動作しない場合は・・・

    2,1 スクリプトライブラリの衝突
     mootoolsその他のライブラリと衝突してないか。衝突を検証するには、テンプレートからmootoolsその他のライブラリを外します。また、ログイン状態でのQuickEditとの衝突はQuickEditプラグインを停止します。もし衝突が原因であれば、jQueryのnoConflict()メソッドで衝突を回避できる場合があります。

    2.2 jQueryのバージョン
     プラグインに適したjQueryのバージョンを使っているか。特にjQueryの新しいバージョンは後方互換性がなかった気がします。


  • JUNK Reply #6, 2 years, 11 months ago

    Reply
    MEGUさん、sama55さん、ありがとうございます。
    やっと検証することができました。

    2,1 スクリプトライブラリの衝突
     mootoolsその他のライブラリと衝突してないか。衝突を検証するには、テンプレートから mootoolsその他のライブラリを外します。また、ログイン状態でのQuickEditとの衝突はQuickEditプラグインを停止します。もし衝突が原因であれば、jQueryのnoConflict()メソッドで衝突を回避できる場合があります。

    2.2 jQueryのバージョン
     プラグインに適したjQueryのバージョンを使っているか。特にjQueryの新しいバージョンは後方互換性がなかった気がします。

    の線で調べてみましたところ、どうやらこの二つのようで、以前に書いたものとは違うスクリプトを使用し、ログインしていないPCから見ると動きました。
    mootoolsやQuickEditが引っかかっているようですので、単純に考えたら、ログインするのは私なり管理者のみなので、とりあえす良しとすることにします。
    がその他のスクリプトを使用した時にまた動かなくなりそうですので、その時はjQueryのnoConflict()メソッドを使うことになりそうです。

    ありがとうございました。