3

URLのハッシュに基づいてページをスクロールしようとしています。これが私のコードです：

var hash = window.location.hash;
$(hash).scrollTop();

これは何の役にも立ちません。それで、私は何を間違っていますか？もう1つ、次のようなものが必要です。

$(hash).scrollTop($("#header").height());

それは可能ですか?..私のdiv(要素ハッシュが指されている)は、一番上から一番下までスクロールし"#header"ますか?..

更新 1

ハッシュ テキストは ID であるため、 からテキスト「#myid」を返しますwindow.location.hash。もう1つ、ヘッダーのdivにはposition:fixedcssがあり、div（ハッシュがidされている）のコンテナーにはaがあるposition:absoluteため#header、ヘッダーの下にスクロールする必要があるため、ヘッダーの一番下までスクロールする必要がありますまたは高さ。

更新 2

scrollIntoView() プラグインを使用しようとしていますが、エラーが発生しています。

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Mon, 17 Oct 2011 03:23:18 UTC


Message: Object doesn't support this property or method
Line: 71
Char: 5
Code: 0
URI: http://localhost:3000/javascripts/jquery.scrollIntoView.js


Message: Object doesn't support this property or method
Line: 34
Char: 5
Code: 0
URI: http://localhost:3000/surveys/%E6%83%85%E5%A0%B1%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%83%BB%E5%80%8B%E4%BA%BA%E6%83%85%E5%A0%B1%E4%BF%9D%E8%AD%B7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%82%B7%E3%83%BC%E3%83%88%EF%BC%88%E8%87%AA%E5%B7%B1%E7%82%B9%E6%A4%9C%EF%BC%89-%E7%89%88-1-0/C9uKCqXNn2/take?section=17

私のコードは次のとおりです。$("#survey_section_8").scrollIntoView();

私はここで何が間違っていますか? ...

私の質問が明確であることを願っています。ありがとうございました！

4

3 に答える 3

4

指定されたアンカーまでスクロールするには、次のようなものが必要です。

var y = $('a[name=' + window.location.hash + ']').offset().top;
$("html, body").scrollTop(y);

. _ <a>_offset

于 2011-10-14T01:15:33.530 に答える
0

私はこのプラグインjQuery.ScrollTo（）を使用することになりました。しかし、それでも私はそのエラーを取り除くことはできません。そこで、プラグインのjavascript内にコードを入れてみました。ユーレカ！機能した！エラーはページ内の他のjqueryが原因だと思います。これは私がjavascriptに挿入したものです：

jQuery(function( $ ){
                //borrowed from jQuery easing plugin
                //http://gsgd.co.uk/sandbox/jquery.easing.php
                $.easing.elasout = function(x, t, b, c, d) {
                        var s=1.70158;var p=0;var a=c;
                        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                        if (a < Math.abs(c)) { a=c; var s=p/4; }
                        else var s = p/(2*Math.PI) * Math.asin (c/a);
                        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
                };

                $(document).ready(function(){
                    $.scrollTo(window.location.hash, {speed:800, easing:'swing',axis:'y',offset:{top:-(parseInt($('#header').height()))}});
                });
            });

これが最善の答えではないことを私は知っています。しかし、それは仕事をしたので、それは大丈夫です！最適化する方法については後で説明します。

于 2011-10-18T09:00:55.753 に答える
0

$(window.location.hash)それは単なる文字列なので、あまり役に立ちません。探している要素を見つけるには、jQuery にさらに指示が必要です。

ハッシュ テキストは、ページ上の要素の ID、クラス、または名前ですか? おそらく、「。」を前に付ける必要があります。または「#」、または他のセレクターと組み合わせて、jQuery がハッシュを生成したアンカー要素を見つけます。

.scrollTop()次に、パラメータなしで呼び出すと、スクロールトップの位置が返されます。一番上までスクロールしません。パラメータを渡すと、呼び出された要素の垂直スクロール位置が設定されます。@N Rohlerの答えは、私が思いついたよりも実際の例にはるかに近いものです。それはあなたにとって良いスタートになるはずです。

于 2011-10-14T01:18:56.793 に答える