.smooth-scroll causes Uncaught Error: Syntax error, unrecogn

web
mobile

Topic: .smooth-scroll causes Uncaught Error: Syntax error, unrecognized expression:

pro asked 3 years ago

I'm using MDBootstrap on a Django project (for the first time!).  Every time I added .smooth-scroll to an element it would work on scrolling within that page, but if I wanted to link back from another page it would give me an error.  I'm using this within Django and have the following conditional statement on the navbar links:
<a class="nav-link" {% if request.get_full_path == home_url %}href="#features"{% else %}href="{% url 'home' %}#features"{% endif %}>Features</a>
After playing with the jQuery a while I found that I had to escape some of the characters in the smooth scroll script to get it to work - so - within the project I added the following jQuery to the project .js file:
$(function() {
 $('a[href*=\#]:not([href=\#])').click(function() {
 var target = $(this.hash);
 target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
 if (target.length) {
 $('html,body').animate({
 scrollTop: target.offset().top
 }, 1000);
 return false;
 }
 });
});
  Note on line two that I had to escape the # with \ - now it works.  I thought this might be useful for others, hence posting here.

Bartłomiej Malanowski staff pro premium commented 3 years ago

Thanks for sharing! Is there anything we can do or you just wanted to show us your solution?

pro commented 3 years ago

Thanks, but no. I was sharing in case anyone else had a similar issue. Steve

Hi. When you said "if I wanted to link back from another page it would give me an error" you meant it show you any error? or just it did not work? I got that trouble using django and realize that when you are using smooth-scroll it just works in a landing page. But if you want to get into another page, it has to be different, you have to ignore smooth-scroll. Let me show you my solution, in case you meant the same problem that I got.
<ul class="navbar-nav {% if is_menu_index == True %} smooth-scroll {% endif %}">
 <li class="nav-item right-border active">
 <a class="nav-link" href="{% if is_menu_index == False %}{% url 'index' %}{% endif %}#people"
 data-offset="70">EMPRESA <span class="sr-only">(current)</span></a>
 </li>
</ul>
What I had to do was to make Django aware when is index (My landing page) and when is another page.
Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No