I'm fairly new to jQuery and I'm trying to make my mobile menu (which opens through a menu button) to scroll to the section and close once a link has been pressed.
The issue I'm having is that all my links are still slidetoggling the menu.
I only want links with the class "menu_links" to slidetoggle the menu.
(The css display section is to ensure the page is in mobile mode before toggling the menu and I'm not having and problems with it)
Please could someone explain to me what I'm doing wrong and the better way to do so? Any help would be hugely appreciated!
//Smooth scrolling
$(document).ready (function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
//Issues area
if ($("a").hasClass("menu_links")) {
if ($(".menuButton").css("display") == "block" ){
$( ".menu" ).slideToggle( "medium" );
}
}
return false;
}
}
});
});
Changed line:
if ($("a").hasClass("menu_links")) {
to
if ($(this).hasClass('menu_links')) {
Related
I have the following code to enable smooth scrolling for on page navigation which I simply copy-pasted from somewhere I do not remember.
Since the smooth scrolling happens on an anchor tags click, it messes up Bootstrap Javascript for Tab which too utilizes anchor tags(This is what I have concluded, I hope I am correct).
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Now I do not understand this $('a[href*="#"]:not([href="#"])') part of the code, can somebody please put some light on what this is doing ? Also how do I fix this so that the above function fires only on On Page anchor clicks ?
a[href*="#"]:not([href="#"])
Above selector is gone target a tag with href="#smthing". So by default its gone effect bootstrap tab functionality.
Instead of that increase css specificity.
Use parent class like
$(function() {
$('.myParent a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
I'm using jQuery smooth scroll code on a wordpress site which I have embedded in the header right above the body </head> tag. My main menu buttons are linking to sections of the same page. When I click these buttons they jump to the section on the same page but the scroll really stutters and is very jittery. However it works smoothly when I use the button "Get your 6.5 Driver Now!" which is not in the main menu (middle left side of the page). Here is the Code:
<script>
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
Is it conflicting with some other code? Does anyone have any ideas? Thanks
Site: http://krankgolf.staging.wpengine.com
I'm using Slicknav on my site to add in a mobile friendly menu. I have a script I'm running to add smooth scrolling to page anchors, for some reason it works for child menu items but not parent menu items.
I'm guessing this is because the parent menu item has some sort of click function attached to it to open the child menu. I'm not great with jQuery and I'm not sure how to get around this.
Here's what I'm using to add the scrolling effect:
$('.slicknav_menu a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').stop().animate({
scrollTop: target.offset().top - 120 //offsets for fixed header
}, 1000);
return false;
}
}
});
http://www.littlestonegroup.org
If you click "Learn" i want it to scroll down to next link. I can have it snap to using anchor links, but I want to have the scroll effect. I have looked at a number of tutorials, but I'm not sure how to install javascript nor implemented a script suggested by a tutorial.
Thanks in advance, I really appreciate your help!
I found this smooth scroll function over at CSS-Tricks:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Here is the function in action JSFiddle
You can add it right before the closing body tag by wrapping the above function in:
<script type="text/javascript">
function here
</script>
I'm using the following Javascript on my web site to create a smooth scrolling effect when the user clicks the Contact Us link, to scroll to the contact information in the footer. I got this code snippet from a comment by Devin Sturgeon on the CSS-Tricks post on smooth scrolling. My only guess is that the issue arises from the fact that the anchor link is not in a set position, but in the fixed menu. According to the post, the snippet should work simply by cutting and pasting it in.
<script type="text/javascript">
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</script>
this line $('a[href*=#]:not([href=#])') is returning an empty set so your click handler is not being set on any dom element. The scrolling is being done by the browser using the old fashion anchor tag <a name="contact"> </a>.
#FakeRainBrigand is right, your document isn't fully loaded when you add your click handler. Just add it to the ready event.
$(document).ready(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 181
}, 1000);
return false;
}
}
});
});