Develop Reference

Scroll top undefined in shopify site

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.

Anchor scroll is scrolling to the anchor upon page load

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);
});

Problem with scrollto offset javascript because of header

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?

Scroll less then default when clicked navitem

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.

How do you use "Scroll To" to factor in the fixed nav heights at different media queries?

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;
});
};