Smooth scroll for anchor

alexey
Inactive member
Topic Author
Member

9 years 6 months ago #45362 by alexey

Smooth scroll for anchor was created by alexey

Hi friends.

I have a question.

How i make use smooth scrolling to an anchor on the page in template Justice?

Thank you for help and your responses

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

9 years 6 months ago #45363 by ivan.milic

Replied by ivan.milic on topic Smooth scroll for anchor

Well you should have links with some id

so <a id="something" name="something">sample sample sample</a> and link to it with anchor

<a href="#something">sample</a>

Please Log in to join the conversation.

alexey
Inactive member
Topic Author
Member

9 years 6 months ago #45364 by alexey

Replied by alexey on topic Smooth scroll for anchor

This I tried, but there is no smooth scrolling, there is a jump to an anchor

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

9 years 6 months ago #45366 by ivan.milic

Replied by ivan.milic on topic Smooth scroll for anchor

well try to find some extension for it. We can do that but it requires some scripting and is considered as paid job(minor charge).

Please Log in to join the conversation.

alexey
Inactive member
Topic Author
Member

9 years 6 months ago - 9 years 6 months ago #45369 by alexey

Replied by alexey on topic Smooth scroll for anchor

How work smooth scroll in hot_cv template?

Last edit: 9 years 6 months ago by alexey.

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

9 years 6 months ago #45371 by ivan.milic

Replied by ivan.milic on topic Smooth scroll for anchor

Here is .js used for smooth scroll on that page, using jquery.animate, just used to scroll to top.

Code:

jQuery(document).ready(function(){

	// hide #back-top first
	jQuery("#back-top").hide();
	
	// fade in #back-top
	jQuery(function () {
		jQuery(window).scroll(function () {
			if (jQuery(this).scrollTop() > 100) {
				jQuery('#back-top').fadeIn();
			} else {
				jQuery('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		jQuery('#back-top a').click(function () {
			jQuery('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

and this is how it's shown on page

Code:

<p id="back-top" style="display: block;">
	<a href="#top"><span></span></a>
</p>

Please Log in to join the conversation.

Time to create page: 0.150 seconds