javascript - 单击主页链接时重置滚动到顶部

标签 javascript jquery html css

我正在设置一个网页。我不是程序员,但已经能够在一定程度上成功地浏览它。我的问题是这样的——我有一部分网页(一个 Div)具有使用 Overflow 属性的可滚动文本。我可以通过指向页面顶部的 anchor 链接将文本返回到顶部,但是当我单击已设置为返回“主页”的链接时,它会这样做,但不会将滚动条重置为顶部。有人可以告诉我如何启用该页面,以便我可以单击“主页”并将滚动条重置到顶部吗?谢谢。

这是我正在使用的代码。

锚定到页面顶部=

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

Div 引用包含样式的 anchor =

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

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

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

提前致谢。

最佳答案

尝试向您的链接添加 javascript 点击功能。请注意我在此示例中的链接称为“向上滚动”。它调用名为“scrollUp()”的函数。该函数通过 ID 获取您的 div 并将滚动设置到顶部。

只需将此脚本添加到您的页面并更改 ID 以匹配您的 div 的 ID。然后将“OnClick”添加到您的 anchor 链接。我编辑了答案以匹配您发布的代码。

<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>

关于javascript - 单击主页链接时重置滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24373875/

相关文章:

javascript - 重新加载时 .map 不是函数 reactjs

javascript - 为什么有些人在定义 React 组件时使用 state 而不是 this.state ?

javascript - 修复了标题 div 在滚动时消失的菜单

javascript - Hide/Show Div below select 取决于是否选择了一个选项

javascript - 检测 google recaptcha 执行错误

jquery - 如何通过 jQuery 中尚不存在的元素事件使元素 live()

javascript - 如何为 HTTP 请求设置 cookie?

javascript - jQuery - 实现独特的连续排名

javascript - 如何将 JavaScript 变量分配给隐藏输入?

javascript - 在 AngularJS 中表中添加的行上显示弹出窗口 3 秒