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
Related
I need help with this scrollto code snippet. The problem is that I need to set an offset to account for my menu. Without the offset the header that I scroll to gets buried underneath the menu. See for yourselves here:https://julyfx.mystagingwebsite.com/stanford-mba-msx-essay-topic-analysis-examples/
Would anyone happen to have a suggestion?
Thank you! Leah
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
});
</script>
Should be relatively easy: If your header is for example 85px high, you can just add these 85px to the offset in your code, so this line
scrollTop: target.offset().top
becomes
scrollTop: target.offset().top - 85
that way the window will scroll 85px less than calculated, so the section will not be hidden behind the header.
Just a suggestion have you tried something like:
window.scrollTo({top: (jQuery('#2').position().top-jQuery('header').height()), behavior: 'smooth' })
?
Where #2 would be taken from your this.hash target above?
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/
Im trying to set a div that I want to scroll to when I click a div in my menu. The problem is that the scroll to the div, is not scrolling to the div that I have in my code, It always scroll to something else on my page, strange.
Im using the code bellow:
$(".dns-anchor").click(function() {
$('html, body').animate({
scrollTop: $("#dns-scroll").offset().top
}, 2000);
});
ID #dns-scroll is the div that I want to scroll to.
$(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;
}
}
});
});
or
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
Please check this link:-Smooth scroll to div id jQuery
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've this website, and there's a conflict between Smoothscroll javascript and lightbox one.
Here's the script for the Scroll
$(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;
}
}
});
});
How can I solve it? How can I make the lightbox and the smooth scrolling work simultaneously?
I'm not an jQuery expert and don't know how flexible the selectors are, but here are some suggestions:
Suggestion 1:
I don't think this selector:
a[href*="#"]:not([href="#"])
will work properly. You're selecting all href elements if they dont't have the attribute value "#". I think this case doesn't cover the links with a different value like you have: "#queen-bee". I consider you to use a different selector.
Suggestion 2:
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false; // Try removing the return
}
The return statement could prevent the event from bubbling, so the lightbox won't receive it. Try to remove it.