只是想知道为什么当页面分为一半时以下代码失败。目标是,当您单击跳转到顶部链接时,它将转到页面顶部。但这不是。但是,如果删除了车身样式的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>