CODEWITHSUNDEEP
htmlcssuser-interfacescroll
Lauren
Lauren

Reputation: 109

scroll-behavior smooth with anchor tag making no difference

I'm trying to achieve a smooth scroll when the anchor link is clicked, but at the moment I'm still getting the quick jump to #content and I can't work out where I'm going wrong.

HTML: 

<body class="home">
  <section id="cover-section" class="section cover">
    <div class="cover-inner content">
      <h1 class="title"><span class="title-inner">TITLE</span></h1>
      <p class="byline">Some text here</p>
      <a class='section-jump' href='#content'></a>
    </div>
  </section>
  <section class="section content">
    <a id='content' href="https://github.community/t5"><img src="logo.png"
        alt="Logo image" title="Logo"></a>

CSS: 

.section-jump {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1em;
  border: 0.5em solid white;
  width: 0;
  height: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.section.content {
  height: 100vh;
  scroll-behavior: smooth;
}

Browser information: Chrome version 69.0.3497.100 Also tested in Safari 12.0

Upvotes: 0

Views: 1812

Answers (2)

Lauren
Lauren

Reputation: 109

I got this code to work by adding the scroll-behavior property to the html tag in the CSS, rather than on the .section content container directly.

Upvotes: 3

Said SOUALHI
Said SOUALHI

Reputation: 164

your issue is in your css selector

must be like that : 

.section #content {
     height: 100vh;
     scroll-behavior: smooth;
 }

you should point to your id

Upvotes: 0

Related Questions