gpt4 book ai didi

html - 如何在垂直分成两半的页面上跳转到顶部链接,没有 jscript 或插件

转载 作者:太空宇宙 更新时间:2023-11-04 08:12:24 24 4
gpt4 key购买 nike

只是想知道为什么当页面被分成两半时下面的代码会失败。目标是当您单击跳转到顶部链接时,它会转到页面顶部。但事实并非如此。但是,如果删除了 body style 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>

最佳答案

您要跳转到的 anchor 需要在您向下滚动的 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>

关于html - 如何在垂直分成两半的页面上跳转到顶部链接,没有 jscript 或插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46180939/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com