Question

我正在设置一个网页。我不是程序员，但能够以合理的成功率完成它。我的问题是这个 - 我有一个网页（Div）的一部分，它使用Overflow属性可滚动文本。我可以让文本返回到顶部，并带有到页面顶部的锚点链接，但是当我单击我设置的链接返回“Home”时，它会这样做，但不会将滚动条重置为最佳。有人可以告诉我如何启用页面，以便我可以单击“主页”并让它将滚动条重置为顶部？感谢。

这是我正在使用的代码。

锚定到页面顶部=

<a name="pgtop"></a>

Div引用锚点，包括样式=

<div class="rtop"><a href="#pgtop">Return To Top</a></div>

选择“主页”的页面底部的链接 - 相当标准的东西=

<div class="footerlinks"><a href="#">Home</a></div>

提前致谢。

Answer 1

尝试在您的链接中添加javascript点击功能。请注意此示例中的链接名为＆＃34;向上滚动＆＃34;。它调用一个名为＆＃34; scrollUp（）＆＃34;的函数。该函数通过ID抓取您的div并将滚动设置为顶部。

只需将此脚本添加到您的页面并更改ID以匹配您的div的ID。然后添加一个＆＃34; OnClick＆＃34;到你的锚链接。我编辑了答案以匹配您发布的代码。

<html>
     <head>
          <style type="text/css">
          div.rtop {
            width:100px;
            height:100px;
            overflow:scroll;
           }
          </style>
     </head>
    <body>
        <a name="pgtop"></a>
        <div class="rtop" id="somediv">You can use the overflow property when you want to have better control of the layout. The default value is visible.
            <a href="#pgtop" onClick="scrollUp()">Return To Top</a>
        </div>
    </body>
</html>

<script>
function scrollUp(){
    var myDiv = document.getElementById('somediv');
    myDiv.scrollTop = 0;
    }
</script>

Answer 2

正如我在评论中提到的那样：

底部链接中的

href="#"表示当前页面顶部（它不会滑动你的div滚动 - 只有文档滚动） ...如果您当前的网页不是您要导航到的主页，请尝试href="?"重新加载当前页面或href="http://url.to.your.home.page"以设置加载主页的链接。

如果您想了解更多

，这里有一些参考文档

http://www.w3schools.com/html/html_links.asp

Answer 3

只需添加此jquery就可以了。

$('html, body').animate({
    scrollTop: $("pgtop").offset().top
}, 2000);

单击主页链接时将滚动重置为顶部

3 个答案: