单击链接并返回链接行而不向后滚动

时间:2011-10-21 04:01:27

标签: javascript jquery scroll hyperlink

我用css创建一个div框:overflow:scroll。这是我的代码:

<div id="resultbox" style="overflow:auto">
    <div id="abc"><a id="p1" href="123.php" class="fac_result" >abc</a>
        <a id="p2" href="456.php" class="fac_result" >def</a>
        <a id="p3" href="789.php" class="fac_result" >ghi</a>
    </div>
    <div id="ccc">
        <a id="pt1" href="123.php" class="fac_result" >123</a>
        <a id="pt2" href="456.php" class="fac_result" >456</a>
        <a id="pt3" href="789.php" class="fac_result" >789</a>
    </div>
    <div id="kkk">
        <a id="s1" href="ddd.php" class="fac_result" >wer</a>
        <a id="s2" href="fff.php" class="fac_result" style="background-color:#C7C8CA">fff</a>
        <a id="s3" href="ggg.php" class="fac_result" >ggg</a>
    </div>
    <div id="opo">
        <a id="t1" href="qqq.php" class="fac_result" >rrr</a>
    </div>
</div>

如何在用户在页面刷新后单击链接但是仍然会将用户返回到我刚刚选择的行时使用background-color:#C7C8CA突出显示背景,但我不希望滚动在页面上。我只想让它带回我在div框中的选定链接。可能吗?

2 个答案:

答案 0 :(得分:0)

您需要通过哈希传递id,例如#id。假设您要将用户重定向到滚动的此行:

<a id="s1" href="ddd.php" class="fac_result" >wer</a>

您可以使用以下方式重定向:

page.php#s1

page.php应该与定义上述链接的页面相同。


工作示例就在这里,点击以下链接:

My Answer

它会直接滚动我的答案。这里使用相同的技术,这里是url:

https://stackoverflow.com/questions/7844837/
click-on-a-link-and-go-back-to-the-link-row-without-scroll-back/7845469#7845469

最后可以看到,#7845469是包含我答案的行的id。

答案 1 :(得分:0)

你是跨页进行的吗?

您可以使用scrollTo插件,它可以在div内滚动。

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

他们的示例是这样创建的:http://demos.flesler.com/jquery/scrollTo/


如果你想在pagereload上使用它,并将背景设置为动态 - 那么只需执行:

$('resultbox').scrollTo($('a[background-color=#C7C8CA]'));