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;
}
}
});
Related
I have the following working script from CSS Tricks, I have adjusted it to have a top offset, due to a fixed header menu:
$(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 - 180
}, 1000);
return false;
}
}
});
});
HTML:
Link in the header menu
About
Link on the subpage
<a name="about"></a>
On the same page, the scrolling with top offset works fine, however when there is a link to an anchor link on a different page, the top offset is ignored. How can I fix that?
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 want to have links in my page that animate the scrolling of the page (actually not the page but the #scrollable element, in this case) to the target position.
The following looks very rough, both on mobile and desktop. It seems that Skrollr could help me with that. How could I implement the following with it?
var scrollable = $('#scrollable'); // whole page container that scrolls, not using native scroll
var headerDownArrow = $('#header-down-arrow');
headerDownArrow.on('click', function(){
scrollable.animate({
scrollTop: $("#home-portfolio").offset().top
}, 1000)
});
I tried this and it doesn't work (no scroll at all), what am I missing?
var s = skrollr.init({
smoothScrolling: true,
skrollrBody: document.getElementById('scrollable')
});
skrollr.menu.init(s, {
animate: true,
easing: 'sqrt'
});
I also tried this as well as other variations of it that I found on this post and it always looks very jagged.
$('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) {
$scrollable.animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
I also disabled all scroll events (and ultimately all JavaScript), then styles and HTML elements with fixed positioning, and scrolling's still rough.
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')) {
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;
}
}
});
});