Topic: .smooth-scroll causes Uncaught Error: Syntax error, unrecognized expression:
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.
Fabio Andrés García Sánchez pro answered 7 years ago
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.
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
Bartłomiej Malanowski staff pro premium commented 7 years ago
Thanks for sharing! Is there anything we can do or you just wanted to show us your solution?pro commented 7 years ago
Thanks, but no. I was sharing in case anyone else had a similar issue. Steve