Smooth scrolling

This commit is contained in:
Alicia Sykes 2021-09-01 22:11:10 +01:00
parent 305769adce
commit c25e346b35
2 changed files with 9 additions and 1 deletions

View File

@ -10,6 +10,10 @@ import IconBannerSource from '../../static/icons/banner_source.svg';
import IconBannerDocs from '../../static/icons/banner_docs.svg';
import IconDownArrow from '../../static/icons/interface_down.svg';
const scrollToFeatures = () => {
document.querySelector('#go-down').scrollIntoView({ behavior: 'smooth' });
};
export default function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
const [showMore, setShowMore] = useState(false);
@ -40,7 +44,7 @@ export default function HomepageHeader() {
</span>
</div>
{(!showMore) &&
<a href="#go-down" className={styles.scrollDown} id="go-down">
<a onClick={scrollToFeatures} className={styles.scrollDown} id="go-down">
<IconDownArrow className={styles.scrollDownIcon} />
<span className={styles.scrollDownText}>Feature List</span>
<IconDownArrow className={styles.scrollDownIcon} />

View File

@ -60,6 +60,10 @@ nav.navbar {
}
}
html {
scroll-behavior: smooth;
}
body {
background: var(--background);
}