html - How to have a jump to top link on a page that is split in half vertically no jscript or plugin -
just wanted know why following code fails when page split in half. goal when click on jump top link go top of page. not. if body style css removed (well kind of)
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 @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum 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 @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <div> <p><a href="#jump">jump top</a></p> </div> </span> </div>
the anchor jumping needs inside of div have scrolled down.
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 @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum 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 @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p>scelerisque diam adipiscing ad justo massa torquent vehicula dictumst netus consequat parturient @ parturient augue habitasse sem nulla tempor vestibulum parturient.mus fermentum a tristique dignissim ullamcorper sit fringilla sociis eget rhoncus.</p> <p><a href="#jump">jump top</a></p> </div> </div> </body>
Comments
Post a Comment