I have navbar with items. When i click on item it scrolls me down to the div. For example i click on contact and it scrolls me to contact. My problem is that i have fixed navbar. And my navbar hide heading of section. So when i click on contact it scrolls me down to contact but heading is behind navbar.
This is my script i need to add something like scroll - 55px or something like that but i dont know how.
<script>
// Select all links with hashes
$('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>
You could first check if link clicked is /contact and then apply a different scroll like this:
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
let scrollOffset = 0;
if ($(this).attr('href') === '/contact') {
scrollOffset = 55;
}
$('html, body').animate({
scrollTop: target.offset().top + scrollOffset
}, 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
};
});
}
It's not the most elegant solution but that should do the trick.
If you could share html as well it would be easy to understand. Anyways, as i understood the problem is with fixed navbar. When Positioning absolute/fixed is used the div is then out of the flow of the document. To get elements start immediately after header you would need to give elements container a margin-top equal to the height of the header. This is the easiest solution. You do not need to do anything with js.
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 am working on an ecommerce store(shopify/liuquid).
I want to scroll smoothly to different hashs.
Now because this is a CMS, I have had to add some attributes via editor or manually with JS.
Here I give it the href
$(document).ready(function() {
$(".hero__cta").addClass("scroll");
$(".hero__cta").attr("href", "#section2")
});
If you go to the website, just under the main image, #the new entries# title, has this is the markup:
<a id="section2"> </a>
And here is the JS function:
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 800,
function() {
window.location.hash = hash;
}
);
}
});
});
So if you go to the site and click on the CTA button, it should scroll smoothly to that anchor. Works on a Codepen etc, but not on the Shopify platform.
I get :
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.
The site is live here:
https://www.toptrendshopping.com/
Oh and how and where do I add an IntersectionObserver polifill for this?
I have found a fix. As you can see, this works now on the live site.
$(document).ready(function(){
$(".hero__cta").attr("href", "#two");
$('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
};
});
}
}
});
});
Found this on CSS tricks, still do not entirely why all this is required but work for now.
And a little extra, if you want to add a polyfill on a Shopify store, do it in the head section of the "theme.liquid" file.
Any help with this is greatly appreciated! I have a button at the top of my product page for a sizing chart which anchor scrolls to the sizing chart image at the bottom of the page. However, upon page load, the page automatically scrolls down to the sizing chart. What can I modify so that the page does not automatically scroll down to the anchor? Here is my JS:
// Select all links with hashes
$('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
};
});
}
}
});
I assume you mean that the page scrolls down when it is reloaded.
It is default browsers behaviour to scroll the page down to the point the user were the last time she/he visited the page.
To avoid that scroll to top before the page is closed:
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});
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 am using the collapsing header described here http://codepen.io/cbracco/pen/corFl
I'd like to enhance it with the following feature:
When the user has scrolled the content area all over the header I'd like to display a "reset" button that pushes the content area back to its initial position and reveals the header fully again.
I guess at least for the reset, I'd have to use javascript (or the CSS checkbox trick maybe?). Could the "reset" button made visible purely by using CSS or would I have to use window.onScroll to detect scrolling of the content area and display the button myself via javascript?
You can create an element with an id at the top of the page (i.e. <span id="top">), and then use Javascript to scroll to that element.
button.addEventListener('click', function() {
window.location.hash = "#top";
});
See this SO question.
Scroll to top can easily be done without javascript:
<div id="top">lorem ipsum</a>
go to top
http://codepen.io/anon/pen/PZBXyg
If you however want to smoothly scroll to the top, then I'd suggest to use this neat little snippet of jquery:
$('#top').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
history.pushState({}, '', target.selector);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
http://codepen.io/anon/pen/xZJmyP
To reveal the "reset" button based on how much the user has scrolled, you might want to utilize the window.onscroll listener and then check the scrollTop value
With native javascript:
window.onscroll = function(){
console.log(document.body.scrollTop)
}
With jQuery
$(window).scroll(function (event) {
console.log($(window).scrollTop());
});