0

I need to scroll to element using href/onclick. My element Id has special characters. For example -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation">
  <ul>
    <li><a href="#home" class="global_error_link_sample">HOME</a></li>
    <li><a href="#about" class="global_error_link_sample">ABOUT</a></li>
    <li><a href="#contact" class="global_error_link_sample">CONTACT</a></li>
  </ul>
</nav>
<div id="home" class="page">HOME</div>
<div id="siteNavigation.about" class="page">ABOUT</div>
<div id="siteNavigation.contact" class="page">CONTACT</div>

I tried using below, it works fine for HOME, but not for ABOUT and CONTACT. with some research, I understood I need to escape dot (.) from my ID. Need some help how to do that. Any help is much appreciated.

$("#site-navigation .global_error_link_sample").on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    $('html, body').stop().animate({
      scrollTop: ($(target).focus().offset().top-200)
    }, 500);
 });
  • Why not use dashes instead of dots? `siteNavigation-about` –  May 10 '18 at 15:32
  • 1
    those are dynamic IDs coming from backend, so cannot change them practically. –  May 10 '18 at 16:29

0 Answers0