"smoothly" scroll to an anchor | MODX Community Forums

10 Posts

curdegn Reply #1, 16 years, 6 months ago

Hi everyone,

I made a javascript that scrolls "smoothly" to the specified anchor.
Within Modx I use the following syntax to link to a certain anchor: [~PAGEID~]#ANCHORNAME

Now, how do I put my javascript "in the middle", so one do not jump to the specified anchor but "smoothly" scroll to there?
BTW: Is there already a build in function of Modx to "smoothly" scroll to an anchor instead of jump?

Am quite new at Modx and happy for any advise. Many Thanks
Curdegn

244 Posts

noahlearner Reply #2, 16 years, 6 months ago

go to http://flesler.blogspot.com/2007/10/jqueryscrollto.html and check out his jQuery scroll to plugin. Read up on the documentation on his site and look at the source files of his examples to figure it out. Sorry I can’t be of much more help than that.

-Noah

http://www.learnerdesign.com/ | http://www.youngsbicycleshop.com/
twitter: @noahlearner

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 16 years, 6 months ago

This is purely a feature of the browser, so it has to be done with javascript. MODx really has nothing to do with that; it makes no barriers to putting whatever javascript bells and whistles you want in your pages.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

10 Posts

curdegn Reply #4, 16 years, 6 months ago

Many thanks for for the link. I kind of like this jQuery.Localscroll and am now trying to use it. Has anyone experience in doing so?
I basicly try to follow this instruction: http://www.bitrepository.com/scroll-effect.html

I put the newest versions of the 3 Javascripts into my according folder and add the following 3 lines to my general page template in Modx (names and path changed accordingly):

<script type="text/javascript" src="/js/jquery.latest.js"></script>
<script type="text/javascript" src="/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="/js/jquery.localscroll-1.2.7-min.js"></script>

But now I am not sure where to put the following script:

<script type="text/javascript">
<!--
$(document).ready(function()
{
$.localScroll({
		queue:true,
		duration:1000
});
});
-->
</script>

The goal is that all the "anchor links" on my webside [~PAGEID~]#ANCHORNAME will scroll smoothly....

10 Posts

curdegn Reply #5, 16 years, 6 months ago

Got it working.
Will now try to understand it better, optimize then make a small post with the solution

10 Posts

curdegn Reply #6, 16 years, 6 months ago

I put the following into the header of my standard template:

<script type="text/javascript" src="assets/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="assets/js/jquery.localscroll-1.2.7-min.js" ></script>
<script type="text/javascript" src="assets/js/jquery.scrollTo-1.4.2-min.js" ></script>
<script type="text/javascript">
  $.noConflict(); // to not conflict with MaxiGallery
    jQuery(document).ready(function($){
       // alert("As you can see it works"); // for testing purpose only
       $.localScroll({
		queue:true, // one axis after the other
               offset: -30, // scroll a bit more up so one can see the anchors title
		duration:500 // kind of fast
       });
    });
</script>

It does exactly what i want... so far..