Home > Back-end >  HTML/CSS button - scroll down to another section
HTML/CSS button - scroll down to another section

Time:11-28

I'm thinking about one process with my website. I created a button via CSS/HTML and I would like to click on in and croll down to another section in website (scroll down to website)

It is possible to process without javascript ?

CodePudding user response:

Use scroll-behavior: smooth; on html elemnt:

html {
  scroll-behavior: smooth;
}

.empty{
     height:1000px;
     background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}
<a id="#top" href="#bottom">Click for smooth scroll to bottom</a>
<div class="empty"></div>
<a href="#top" id="bottom">Back to top</a>
<div class="empty"></div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Yep It's possible:

<button onclick="scroll(0, 100);">click to scroll to the 100th pixel</button>

You can change the button tag to whatever and add your custom styling of course.

CodePudding user response:

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

I refer to that web-page, because this is the best example with explanation.

CodePudding user response:

You can use this in ur css file..

body{
   scroll-behavior: smooth;
}
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related