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

steveshead pro asked 5 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 commented 5 years ago

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

steveshead pro commented 5 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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