html/css buttons that scroll down to different div

2019-02-02 09:16发布

站内问答 / HTML/CSS
965 4 5

Can someone help me I'm searching for css/html code example:

I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.

If I click this button(middle) my page would automatically scroll down from the top of my page to the div #middle section.

same for the other buttons refered to div id='top', and div id='bottom'

Thanks in forward! I really couldnt find any solution on the internet.

Is there a way to keep my buttonlist on a fixed position so it stays on screen while moving through sections?

4条回答
别忘想泡老子
2楼-- · 2019-02-02 09:35

try this:

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-02-02 09:43

For something really basic use this:

<a href="#middle">Go To Middle</a>

Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
4楼-- · 2019-02-02 10:01

HTML

<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div id="top"><a href="top"></a>Top</div>
<div id="middle"><a href="middle"></a>Middle</div>
<div id="bottom"><a href="bottom"></a>Bottom</div>

CSS

#top,#middle,#bottom{
    height: 600px;
    width: 300px;
    background: green; 
}

Example http://jsfiddle.net/x4wDk/

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2019-02-02 10:01

There is a much easier way to get the smooth scroll effect without javascript. In your CSS just target the entire html tag and give it scroll-behavior: smooth; 

html {
  scroll-behavior: smooth;
 }
 
 a {
  text-decoration: none;
  color: black;
 } 
 
 #down {
  margin-top: 100%;
  padding-bottom: 25%;
 } 
<html>
  <a href="#down">Click Here to Smoothly Scroll Down</a>
  <div id="down">
    <h1>You are down!</h1>
  </div>
</html

The "scroll-behavior" is telling the page how it should scroll and is so much easier than using javascript. Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)