CODEWITHSUNDEEP
javascripthtmlcssanchor-scroll
Badal Singh
Badal Singh

Reputation: 479

How to add smooth Scrolling to single anchor instead of whole page

I have created 2 anchors within my page As of default , whenever one clicks on anchor link ,it directly jumps to the requested section

One easy way of enabling smooth Scrolling is adding this in CSS file but it affects the whole html page , I don't want that

i want this smooth Scrolling property to only apply to a single anchor within my page ( lets say the section 1 anchor for this example ) and not every anchors universally

Html Codes are included below in snippets

html {
  scroll-behavior: smooth;
}
<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>

<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

<a class="anchor" id="Section1">&nbsp;</a>

<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

<a class="anchor2" id="Section2">&nbsp;</a>

Upvotes: 0

Views: 1411

Answers (2)

yunzen
yunzen

Reputation: 33439

Here is my solution using (Vanilla) JavaScript.

I just toggles the className of the <html> element dependent on the data-smooth-scroll attribute being set on the link.

"use strict";

document.addEventListener('click', function(e) {
  var className = 'smooth';
  var classList = document.documentElement.classList;
  if (e.target.dataset.smoothScroll) {
    classList.add(className)
  } else {
    classList.remove(className)
  }
})
html.smooth {
  scroll-behavior: smooth;
}

section {
  width: 80%;
  border: 1px solid gold;
  margin: 50px auto;
  height: 100vh;
}
<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<a href="#Section3" data-smooth-scroll="1">Section 3</a>

<a class="anchor" id="Section1">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section2">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section3">&nbsp;</a>
<section>
  <h2>Section 3</h2>
</section>

If you don't want the link to decide whether to smooth-scroll or not but the target anchor instead, this should work

"use strict";

document.addEventListener('click', function(e) {
  var className = 'smooth';
  var classList = document.documentElement.classList;
  classList.remove(className)
  if (e.target.tagName.toLowerCase() === 'a') {
    var id = e.target.hash.replace(/^#/, '')
    var anchor = document.getElementById(id);
    
    if (anchor && anchor.dataset.smoothScroll) {
      classList.add(className)
    }
  }
})
html.smooth {
  scroll-behavior: smooth;
}

section {
  width: 80%;
  border: 1px solid gold;
  margin: 50px auto;
  height: 100vh;
}
<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<a href="#Section3">Section 3</a>

<a class="anchor" id="Section1">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section2" data-smooth-scroll="1">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section3">&nbsp;</a>
<section>
  <h2>Section 3</h2>
</section>

Upvotes: 1

Rutvik Gumasana
Rutvik Gumasana

Reputation: 1620

  • Add Smooth Scrolling to the Link Name field.
  • Select Before Body End Tag from the Placement menu.
  • Paste the script below into the blank field.
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script>
      jQuery(function($) {

        // The speed of the scroll in milliseconds
        var speed = 1000;

        // Find links that are #anchors and scroll to them
        $('a[href^=#]')
          .not('.lp-pom-form .lp-pom-button')
          .unbind('click.smoothScroll')
          .bind('click.smoothScroll', function(event) {
            event.preventDefault();
            $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
          });
      });
    </script>
  • Click the Save Code button in the bottom right corner of the dialog box.

Upvotes: 1

Related Questions