如何在页面上跳到顶部链接,该页面被垂直分为一半没有JScript或插件



只是想知道为什么当页面分为一半时以下代码失败。目标是,当您单击跳转到顶部链接时,它将转到页面顶部。但这不是。但是,如果删除了车身样式的CSS,则它确实(很好)

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#split {
  height: 100%;
}
#splitr {
  overflow: scroll;
  overflow-x: hidden;
}
.right {
  float: left;
  width: 50%;
  height: 100%;
}
<body>
  <DIV id="jump"></DIV>
  <DIV id="split">
    <DIV id="splitr" class="right">
      <SPAN>
    <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p class="fivePad">Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
  	<p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
<DIV> 
   <p><a href="#jump">Jump to top</a></p>
  </DIV>
   </SPAN>
    </DIV>

您跳到您已经滚动的div内部的锚点。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#split {
  height: 100%;
}
#splitr {
  overflow: scroll;
  overflow-x: hidden;
}
.right {
  float: left;
  width: 50%;
  height: 100%;
}
<body>
<div id="split">
    <div id="splitr" class="right">
        <a name="jump"></a>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p class="fivePad">Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p>Scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient at a parturient augue habitasse sem nulla a tempor vestibulum parturient.Mus fermentum a a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p>
        <p><a href="#jump">Jump to top</a></p>
    </div>
</div>
</body>

我相信您需要DIV标签作为<a>标签,具有name属性,如

<a name="jump"></a>

最新更新