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.
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