I use bootstrap and the scrollspy.
I have a fixed to top navbar with affix.
The scrollspy is working correct but whenever i'm at the top of the site and no affix is active and i click then on another menu item the offset is totally off. After that the site scrolls to the right menu items with correct offset. Just not whenever i click away from the first nav item. How come? I used
Html:
<body data-spy="scroll" data-target=".mainnav">
And in the navigation id's
JS:
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
$('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;
}
}
});
Where could be the problem that the first click on a menu item after beginning at the top of the site is always wrong with the offset??
Related
I have a one-page website. I have a menu with the smooth scroll. When the user clicks on service then it will target the service section with the smooth scroll. There is no issue on the desktop.
Let's talk about mobile
In mobile, Menu is displaying like below
When I click hamburger icon then it's displaying like this
Now the issue is in the smooth scroll. When I click on service then it's targeting the service section with smooth scroll but the menu is still shown on the mobile.
I have to hide the menu when I click on the menu.
You can check my [code here][3]
https://jsfiddle.net/vqpyt5co/
Added the following code to trigger click event of closing the dropdown.
if ($(".x_mark_img").is(":visible")) {
$(".x_mark_img").click();
}
See updated fiddle
$(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) {
if ($(".x_mark_img").is(":visible")) {
$(".x_mark_img").click();
}
$('html, body').animate({
scrollTop: target.offset().top-80
}, 1000);
return false;
}
}
});
});
I have two javascript files that come in conflict with each other. One is to open modals and uses links like open modal, and would then open the modal with id="modal". But the other script is for smooth scroll and it removes the anchor from the url (I'd like to keep that part!) but after adding the smooth scroll script, the modals don't work. any ideas how I can fix it?
modal.js:
$(".modal-wide").on("show.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
$('a[data-toggle="modal"]').bind('click',function(){
$('.modal').modal('hide');
});
scroll.js:
$(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
}, 500);
return false;
}
}
});
});
scroll.js source: https://css-tricks.com/snippets/jquery/smooth-scrolling/
Try adding your specific href tags to the not selector the the smooth scroll function.
$('a[href*="#"]:not([href="#"]):not([href="#modal"])').click(function()
Here is a fiddle showing the smoothscroll only works for the smooth scroll div which should preserve your modal functionality.
https://jsfiddle.net/bryangators/wjgu1vL9/
I have a button in my banner. This button, when clicked, I'd like it to scroll me to the div below the banner. This is the code I am using:
$(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;
}
}
});
});
When I click on it it'll scroll me, but it'll scroll me past the div. What I believe I need to do is factor in the height of the fixed nav and possibly the padding-top of the div I'm scrolling to.
The next thing is, what if I'm in the mobile view now and the height of the nav changes? How do I factor that in?
I suck at Javascript so any help/pointers would be greatly appreciated.
you could do something like this, so you can modify the scroll length
function scrollNav() {
$('a').click(function(){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
};
I integrated smooth scrolling to an anchor to my page. It works great with the code:
$(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 when i click a link, it scrolls to that position. But since i got a fixed menubar on the top (height: 100px), it overlaps the content a bit.
Can i fix this somehow? like say in the code: scroll to that anchor minus 100px...
i thought it might work with
scrollTop: target.offset(-100).top
is that right?
jQuery's offset is a function to just give you an elements offset. This is not mean to change the offset itself. Just substract the 100px afterwards.
scrollTop: target.offset().top - 100
I want to use bootsraps carousel and smooth scrolling with jquery.
Here is how I make smooth scrolling:
$('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
}, 2000);
return false;
}
}
});
I assumed this code prevents functions of carousel buttons. How can I modify it in a way that it doesnt affects carousel buttons.
Note that I am complete beginner at web development.
Thanks.
If I understand the question correctly, I think you can do one of two things:
Namespace the smooth scroll click event to avoid conflicts with
the carousel.
E.g. $('a').on('click.scroll', function() {…})
Allow event propagation in the smooth scroll function by removing return false;
Hope that helps!