CCS HTML HELP

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
billwetson
New Member
New Member
Posts: 1
Joined: Thu Jun 10, 2021 9:04 am

CCS HTML HELP

Post by billwetson »

I need to add smooth scroll in table items listed on my website homepage each of the item in the table should go to it’s specific location down the page upon clicking. How to perfrom this task using CSS or using Anchor tag?
bilwetson ;)
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: CCS HTML HELP

Post by DIGI3 »

You can set up anchors as normal, then either add the smooth-scroll css property, or use Javascript if you want more control and browser support. See https://developer.mozilla.org/en-US/doc ... l-behavior
Not getting the answer you need? CMSMS support options
tuckerandy
New Member
New Member
Posts: 1
Joined: Wed May 10, 2023 9:28 am

Re: CCS HTML HELP

Post by tuckerandy »

billwetson wrote: Wed Mar 22, 2023 9:07 am I need to add smooth scroll in table items listed on my website homepage each of the item in the table should go to it’s specific location down the page upon clicking. How to perfrom this task using CSS or using Anchor tag?


Hello billwetson, you can use anchor tags to create a smooth scroll effect to navigate to specific sections on your webpage. Here's an example:

1. First, add an ID attribute to each section you want to scroll to. For example, if you have three sections on your homepage, you can add IDs like this:

```
<section id="section1">Section 1 content goes here</section>
<section id="section2">Section 2 content goes here</section>
<section id="section3">Section 3 content goes here</section>
```

2. Then, create a navigation menu with links to each section. For example:

```
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
```

3. Finally, add some CSS to create a smooth scroll effect. Here's an example:

```
html {
scroll-behavior: smooth;
}
```

This CSS property tells the browser to animate the scroll behavior when navigating to a section.

That's it! When you click on a link in the navigation menu, the browser will smoothly scroll to the corresponding section.
Hope this will help you!
Locked

Return to “Layout and Design (CSS & HTML)”