0

jQueryとフラグメント識別子を使用して、ユーザーが現在1ページのサイトのどの部分を見ているかに応じて状態を変更しています。

私はついにこれを機能させることができましたが、SafariとChromeの両方がフラグメント識別子を表示しないため、変数にすることができず、システムが故障します。

特にWebKitブラウザー専用にこのアクションを強制する方法、またはフラグメントにアクセスする別の方法はありますか？

編集：以下にコードを追加

(function($){
$.fn.sectionMove = function() {

    return this.each(function() {          
    $(this).click(function() {
            if(window.location.hash){
                  var $hash = window.location.hash;
            } else if (!window.location.hash) {
                  var $hash = '#section1';
            }
            $n = $hash.substring($hash.length-1,$hash.length);

            $("div#headerNav ul li:nth-child(" + $n + ") a").removeClass('on');

            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1000,'easeInOutExpo', function(){
                var $hash = window.location.hash;
                $n = $hash.substring($hash.length-1,$hash.length);
                $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on');
            });
            event.preventDefault(); 
        });
     });

   };
})(jQuery);
4

1 に答える 1

1

私はそれを自分で解決することができました。問題は私のjqueryの次の行にありました：

$('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top

これにより、ページ上でスムーズなスクロールを実行できましたが、フラグメント識別子でURLを更新せずにアンカーに移動しました。

誰かが同じことを達成する方法に興味があるなら、以下のコードが役立つはずです。自分のニーズに合わせて変更しましたが、クレジットはArial Flesler（http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links）に送信する必要があります。

function filterPath(a) {
        return a.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '')
    }

    var e = filterPath(location.pathname);
    var f = scrollableElement('html', 'body');
    $('a[href*=#]').each(function () {
        var b = filterPath(this.pathname) || e;
        if (e == b && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            /*var anchor1 = window.location.hash; */
            var c = $(this.hash),
                target = this.hash;
            if (target) {
                var d = c.offset().top;
                $(this).click(function (a) {        

                    a.preventDefault();
                    $(f).animate({
                        scrollTop: d
                    }, 1000,'easeInOutExpo', function () {
                        location.hash = target
                        $("div#headerNav ul li a").removeClass('on');

                        $n = target.substring(target.length-1,target.length);
                        $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on');

                    })
                })
            }
        }
    });
于 2010-10-29T21:32:25.687 に答える