Using the option: “scroll to target” creates a smooth scroll down to the specific bloc you want. However, using this other option “navigate to URL” it jumps to that section no matter which page you are on. I’m wondering if it is possible to jump to the page if your coming from a different page and then smooth scroll to the section. Or if you’re already on the same page just to smooth scroll down to the section.
Would make the transitions much smoother.
This Wish List has been languishing here since June 2017. It’s not June 2020. Time for me to give it the love it deserves!
I too want to know what code block I can copy/paste to make my Anchor jumps smooth, rather than instant.
I also would vote for that! I know, that’s not possible now directly, is there a workaround?
Tapping the “Buy Now“ buttons only reloads the page on my iPhone, taking you to the top of the page each time. So I’m afraid I don’t understand the purpose of that example page.
you have to tap on the text links on top. They work and that is what you are looking for
Thanks @Pealco for this example.
After inspecting it for a while(I’m just a beginner), there seemed to be the lazysizes.min.js and the scroll.js scripts, that had to go in the project(how?), and then I just can link to
href=“myPage.html#myTarget”
Is that right?
But I looked in scroll.js, It seemed to create cookies?
To be 100% clear, those “top page links” you refer too look like this:
Desktop Browser:
Mobile:
Tapping those links doesn’t take you to the correct location on the page, as I clearly show in my iPhone video below (with voiceover):
But it isn’t crystal clear precisely where those top page links should take us, so I guess I need to build my own version to make it more clear. But before I can do that, @Pealco needs to share the code hack for smooth scroll! 
Yes I see your Video but I didn’t check anything in iPhone, meanwhile I review my link with the example and now you can see it better, try it…
@Pealco
Do you have a Blocs document you are willing to share so we can learn the secret smooth-scrolling powers of your example web page? 
Here’s the code I ended up using…
<script>
// Smooth-scroll to anchors
$('#bloc-14').on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</script>
Put that in your Footer.
NOTE! Substitute #bloc-14 for whatever the name of your main Bloc is. I am using the Bloc name because if I use “document” there it interferes with my hand-built navigation.
You can see it in action on this web page. Click any of the blue links at top to smoothly scroll to each Anchor.
Now this works on the current page. It doesn’t do anything if you link to an anchor from a different page. In your opening post you said you want to link to a different page and then have that page smoothly scroll (from the top, obviously) to the anchor. I don’t know how to accomplish that. But same-page smooth-scroll to anchors works great with the code above.
The JavaScript that I presented in my previous post doesn’t work on all of my Blocs pages for some reason. However, I am able to use the following jQuery code in the page Footer with success, allowing smooth scrolling to Anchors on the same page, even if the anchors are in different Blocs.
<script>
$(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;
});
}
});
});
</script>
There is a downside to the above code. On the page where that code is used, if I click a link that leads to an Anchor on another page, nothing happens. The link is dead. And when such links are clicked, Safari shows this error:
I can avoid the problem if I restrict the code to a single ID. For example…
<script>
$(document).ready(function(){
$("#example-id 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;
});
}
});
});
</script>
But I need to use multiple IDs because I have 3 Blocs on the page which have links to anchors on that page. In other words, I am trying to bypass the anchor links to external pages which exist inside my mega menu, which is a specific bloc (ID). Using multiple IDs in that code doesn’t work, either with commas or without. Any ideas would be appreciated. Thanks.
Hey @JDW,
The one solution I can think of, which will fix the smooth scroll on the same page and also still enable you to link to an anchor on another page is to add a class to the links that scroll on the same page and amend your code like this…
eg. adding class .samepage
<script>
$(document).ready(function(){
$("a.samepage").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;
});
}
});
});
</script>Note the way the class is added for the on click.
This limits the script running only for links with the class applied.
Thank you very much for your time, Pete!
Prior to reading your suggestion though, I made the following change to the function(event) line:
<script>
$(document).ready(function(){
$('a[href^="./remotes.html"]').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;
});
}
});
});
</script>
The reason that works is because all my links to anchors on that same page are Relative URLs following this pattern: “./remotes.html”. That restricts the JavaScript to that relative URL pattern so the code will only apply to those links and not my other links to off-page anchors have have the full Absolute URL starting with “https://…”
Best,
James