0

サイトのすべてのページで展開されるサブメニューがあります。サブメニューには、親メニュー項目がリンクしている 1 ページ内の名前付きアンカーへのリンクが含まれています。jquery scrollTO と localScroll を使用して、名前付きアンカーを使用してページ内のスクロールを正常にアニメーション化していますが、サイト内の別のページから名前付きアンカーに移動すると、アニメーション化されたスクロールまたは指定された上からのオフセットが保持されません。これを行う方法はありますか？

フィードバックをいただければ幸いです。セシリア

以下は、私が使用しているhtmlの例です。左側に固定メニューと固定ヘッダーがあります。現在、サブメニューのアンカー リンクをクリックするとアニメーションが表示され、ウィンドウの上部から 150 ピクセルのアクティブな名前付きアンカーで停止するため、固定ヘッダーの下に表示されなくなります。

可能であれば、他のページから移動するときにウィンドウを名前付きアンカーまでスクロールしたいのですが、最も重要なのは、上からのオフセットを 150px に保つ必要があることです。現在、別のページからアンカー リンクをクリックすると、上部から 0px で停止し、ヘッダーの下に表示されなくなります。

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" > 
$.localScroll({offset:-150});
</script>
</head>

<body>
<div id="page">
    <div id="header-bg"><!-- fixed header -->
    <div id="header">
    <div id="logo"><a href="/" title="Home" rel="home"><img src="logo.jpg" alt="Home" id="logo-image" /></a></div>
    </div>
    </div> 
<div id="main">

<div id="sidebar-left"><!-- fixed menu -->
<ul class="menu">
<li class="expanded"><a href="/page1" title="Page 1" class="active">Page 1</a><!-- parent -->
        <ul class="menu"><!-- sub-menu linking to named anchors -->
        <li><a href="/page1#anchor1">Anchor-link 1</a></li>
        <li><a href="/page1#anchor2">Anchor-link 2</a></li>
        <li><a href="/page1#anchor3">Anchor-link 3</a></li>
        <li><a href="/page1#anchor4">Anchor-link 4</a></li>
        <li><a href="/page1#anchor5">Anchor-link 5</a></li>
    </ul>
</li>
<li><a href="/page2">Page 2</a></li>
<li><a href="/page3">Page 3</a></li>
<li><a href="/page4">Page 4</a></li>
</ul>  
</div> <!-- /#sidebar-left --> 

<div id="content">
<div class="chapter">
<a name="anchor1" id="anchor1"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor2" id="anchor2"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor3" id="anchor3"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor4" id="anchor4"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

<div class="chapter">
<a name="anchor5" id="anchor5"></a><!-- named-anchor -->
<h3>Sub-heading</h3>
<p>Lots of text</p>
</div>

</div> <!-- /#content --> 
</div> <!-- /#main --> 
</div> <!-- /#page --></body>
4

1 に答える 1

-1

オンクリックのみを適用している場合、アニメーションのオンロードは確実に維持されません。

名前付きアンカーへの実際のオフセットを維持することに関しては、デフォルトでオンロードでこれを行う必要があります。スクロールのある標準ページに移動するsomeurl.com#someNamedLinkと、デフォルトでその名前付きアンカーの先頭に移動し、JS は必要ありません。

さて、コードを見なければ、これをどのように実装しているかを知ることは不可能です。フレーム、オーバーフローした div? 知るか？

何が起こっているのかを判断できるように、サンプル コードを提供してください。

一見すると、ページとオンロード内で状態を維持したいように思えます。状態制御については、jquery.bbq を参照してください。これにより、名前付きの href (#someNamedLink) オンロードを簡単にキャプチャして、アニメーションを適切なアンカーに実行できます。また、戻るボタンのサポートの追加の利点を提供するため、あらゆる場所でアニメーション化できます (個人的には、この種の動作は煩わしいと思いますが、それはあなたの特権です)

于 2010-06-22T14:23:03.723 に答える