Cheers JP
JP
Cat herder and Fog platter.
Cat herder and Fog platter.
JP
Registered User
35 posts
Hi. I have an RSD site with a long page split into sections on which I am using anchors (ID) to navigate to. Can anybody tell me how (or point me at a tutorial) to set up smooth scrolling to those anchors?
Cheers JP
Cheers JP
Eric Rohloff
Senior Advisor
20,266 posts
Online Now
Hi Jonathan,
This should work. Place it in the footer of your page on the Settings tab.
You can see it here.
http://esmansgreenhouse.com/
This should work. Place it in the footer of your page on the Settings tab.
<script>
$(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;
}
}
});
});
</script>
$(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;
}
}
});
});
</script>
You can see it here.
http://esmansgreenhouse.com/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
wmfx wfmx
Registered User
121 posts
Thanks Eric, Great Snipet. I like the demo too!
-WMFX
-WMFX
Mansour ...
Ambassador
938 posts
Just another option " Smooth Scroll Plugin "
https://github.com/kswedberg/jquery-smooth-scroll
https://github.com/kswedberg/jquery-smooth-scroll
Guys at coffeecup are awesometacular.
JP
Registered User
35 posts
Eric
Excellent. Works perfectly.
Thank you JP
Excellent. Works perfectly.
Thank you JP
JP
Cat herder and Fog platter.
Cat herder and Fog platter.
wmfx wfmx
Registered User
121 posts
Thanks Eric, The smooth scroll snipet is a real keeper.
-WMFX
-WMFX
JP
Registered User
35 posts
Eric
The smooth scroll script work for IDs navigating down a page but doesn't seem to work for ID scrolling up the page. For instance #top. Is there a way of enabling that?
Regards JP
The smooth scroll script work for IDs navigating down a page but doesn't seem to work for ID scrolling up the page. For instance #top. Is there a way of enabling that?
Regards JP
JP
Cat herder and Fog platter.
Cat herder and Fog platter.
Eric Rohloff
Senior Advisor
20,266 posts
Online Now
Works on one of my sites.
Can you share a link to your page where it's not working?
Can you share a link to your page where it's not working?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Ger van veen
Registered User
148 posts
Eric Rohloff wrote:
Hi Jonathan,
This should work. Place it in the footer of your page on the Settings tab.
You can see it here.
http://esmansgreenhouse.com/
Hi Jonathan,
This should work. Place it in the footer of your page on the Settings tab.
<script>
$(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;
}
}
});
});
</script>
$(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;
}
}
});
});
</script>
You can see it here.
http://esmansgreenhouse.com/
hi i a perfect script, works in RSD 1.2.
But RSD 1.5 Beta does not work anymore.
No script is how is that in the beta version?
groet,
Ger van Veen
http://schilder-vanveen.nl
Ger van Veen
http://schilder-vanveen.nl
Bob Visser
COO
827 posts
Ger van veen wrote:
hi i a perfect script, works in RSD 1.2.
But RSD 1.5 Beta does not work anymore.
No script is how is that in the beta version?
hi i a perfect script, works in RSD 1.2.
But RSD 1.5 Beta does not work anymore.
No script is how is that in the beta version?
We are using it in various themes to be released with V1.5 so it should work. Here's an example: http://rsd.coffeecup.com/tips-v09.html It is used for the scrolling to section using the table of contents.
Anything specific to your situation, maybe something missing?
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
