SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    ********* Articles ArticleBot's Avatar
    Join Date
    Apr 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Discussion thread for Make Internal Links Scroll Smoothly with JavaScript

    This is a dedicated thread for discussing the SitePoint article 'Make Internal Links Scroll Smoothly with JavaScript'

  2. #2
    Anonymous
    SitePoint Community Guest
    There should be a live example for us to try before we sit down and wade through this to implement it. I want to see how well it works and performs.

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be nice if the script worked for XHTML internal links, where the link can jump to any element by its id.

    Wouldn't be too difficult to add, either.

  4. #4
    Anonymous
    SitePoint Community Guest
    Where is an online sample ????????

  5. #5
    Anonymous
    SitePoint Community Guest
    Nice code. To make the scrolling ease-out, change the ss_scrollWindow-function to this:

    var idx = 0;
    function ss_scrollWindow(srcy,desty,anchor) {
    // use 0 - pi/2 of sine curve to scroll
    var y = srcy+(Math.sin((idx/ss_STEPS)*0.5*Math.PI)*(desty-srcy));
    window.scrollTo(0, y);
    idx++;
    if (idx == ss_STEPS) {
    window.scrollTo(0,desty);
    // cancel the repeating timer
    clearInterval(ss_INTERVAL);
    // and jump to the link directly so the URL's right
    location.hash = anchor;
    idx = 0;
    }
    }

    Then alter the call in the smoothScroll to:

    ss_INTERVAL = setInterval('ss_scrollWindow('+cypos+','+desty+',"'+anchor+'")',10);


  6. #6
    Anonymous
    SitePoint Community Guest
    Aparently there's something different in Mozilla 1.5: you have to change the condition in the ss_fixAllLinks-function, and add a check for 'lnk.href', to see if it exists.

    Also, to add ease-out functionality, change the call to setInterval in the ss_smoothScroll function to:

    ss_INTERVAL = setInterval('ss_scrollWindow('+cypos+','+desty+',"'+anchor+'")',10);

    And replace the ss_scrollWindow function with this:


    var idx = 0;
    function ss_scrollWindow(srcy,desty,anchor) {
    window.scrollTo(0, srcy+Math.round(Math.sin(((idx++)/ss_STEPS)*0.5*Math.PI)*(desty-srcy)));
    if (idx == ss_STEPS) {
    window.scrollTo(0,desty);
    clearInterval(ss_INTERVAL);
    location.hash = anchor;
    idx = 0;
    }
    }

    Have fun!

  7. #7
    SitePoint Member explorer's Avatar
    Join Date
    Dec 2003
    Location
    Amsterdam
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aparently there's something different in Mozilla 1.5: you have to change the condition in the ss_fixAllLinks-function, and add a check for 'lnk.href', to see if it exists. Without it, the smoothscrolling won't work in the latest Mozilla.

    Also, to add ease-out functionality, change the call to setInterval in the ss_smoothScroll function to:

    Code:
       ss_INTERVAL = setInterval('ss_scrollWindow('+cypos+','+desty+',"'+anchor+'")',10);
    And replace the ss_scrollWindow function with this:

    Code:
     var idx = 0;
      function ss_scrollWindow(srcy,desty,anchor) {
        window.scrollTo(0,     srcy+Math.round(Math.sin(((idx++)/ss_STEPS)*0.5*Math.PI)*(desty-srcy)));
    	if (idx == ss_STEPS) {
    		window.scrollTo(0,desty);
    		clearInterval(ss_INTERVAL);
    		location.hash = anchor;
    		idx = 0;
    	}
      }
    Have fun!

  8. #8
    Anonymous
    SitePoint Community Guest
    A nice way to get something more on your web site. Crossbrowserfriendly and easy to integrate.

  9. #9
    Anonymous
    SitePoint Community Guest
    Scrolling doesn't seem to work for me on Mac OS 10.2.8 using IE 5.2, or recent versions of Mozilla or Safari...

    Jeff
    jeff@jeffnye.com

  10. #10
    Anonymous
    SitePoint Community Guest
    Great effect, but for a 'newbie' as myself, a final "put the smoothscroll.js file in the folder, and only code to add in your page is ..." would have helped.

  11. #11
    Anonymous
    SitePoint Community Guest
    I love it! It's the small attention to detail that give a site its professional edge. This sweet script helps the user understand the relationship between the link and the bookmark. Very clever!

  12. #12
    Anonymous
    SitePoint Community Guest
    It works fine except for the "top" links. any ideas why?

  13. #13
    Anonymous
    SitePoint Community Guest
    It works! - and is now a part of MY web site! (I have no problems with the "RETURN TO TOP" links - they work fine, also.)

  14. #14
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Moved to the JavaScript Forum
    Former Design Your Site Team Leader

  15. #15
    Anonymous
    SitePoint Community Guest
    Would be nice to see a working demo of all the tutorials... nothing worse than not being able to see what it does before you spend a lot of time coding it...

  16. #16
    SitePoint Member subz_'s Avatar
    Join Date
    Feb 2004
    Location
    aus
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After hours of trying to find a script like this, stumbling over this one was such a relief.. i was so happy to see it - the only thing i wanted, was to have it scroll horiztonally, instead of vertically :/

    is anyone able to help me make it so it scrolls hortizonally?

    Ive set up a page where it has vertical and horiztonal places to go (ie a piece of text really far down, and then one really far to the right) to test it out.. the one down the bottom gets scrolled to without a problem, but i cant make it scroll to the right..

    also, is it possible to make it so it scrolls to things like images, instead of just text?

    i hate it to say it, but i know _nothing_ about javascript really.. i can look at it a little, and understand (even if only slightly) whats going on, but tahts about it..

    any help would be greatly apreciated it, thanks

  17. #17
    Anonymous
    SitePoint Community Guest
    This works really great!
    I implemented it on my site too. However, it is also possible to use any other element as target using an id attribute. To make this work, replace the code block starting with
    // Find the <a name> tag corresponding to this href
    with this line of code (or just add it):
    destinationLink = document.getElementById( anchor );

    Is it possible to catch the 'back' button call and send the user to hist last position?

  18. #18
    SitePoint Member JayVee's Avatar
    Join Date
    Jun 2004
    Location
    Netherlands
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML links and image links

    If you want to use any tag as targets (<div id="banner">), replace
    Code:
    // Now loop all A tags until we find one with that name
    	var allLinks = document.getElementsByTagName('a');
    	var destinationLink = null;
    	for (var i=0;i<allLinks.length;i++) {
    		var lnk = allLinks[i];
    		if (lnk.name && (lnk.name == anchor)) {
    			destinationLink = lnk;
    			break;
    		}
    	}/
    with
    Code:
    destinationLink = document.getElementById( anchor );

    Sadly, the script does not (neither FireFox nor IE6) work with image links like
    Code:
    <a href="#top"><img src="up.gif /></a>
    Anyone have a remedy?

    // -- edit --
    Ah, I see my post from the article's form has made it this far also! 8 )
    Last edited by JayVee; Jun 20, 2004 at 11:19.
    ASCII stupid questions, get a stupid ANSI

  19. #19
    Peter
    SitePoint Community Guest
    To make the script work with anchors that contain another element (like the IMG inside A problem above):

    Replace the code...

    // Paranoia; check this is an A tag
    if (target.nodeName.toLowerCase() != 'a') return;

    ...with this code:

    // Find the triggering anchor
    while (target.nodeName.toLowerCase() != 'a') {
    target = target.parentNode;
    }

    Cheers! Great piece of code!

  20. #20
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doesn't seem to work with Mac OS X on Safari or IE 5.2, but does with NN7. Any ideas why?

    This could be useful for an effect I was trying to create. Would like to have a fixed size div and have to text scroll within that div rather than scroll to a different position on the page when an internal link is clicked.Anyone know how to do this?

  21. #21
    Julio Manson
    SitePoint Community Guest
    I dont know i may have missed it but does someone have a link that demonstrates this script. If you do please write to me at juliomanson@aol.com and write "internal links scroller" in the subject line so that your mail isnt mistaken for spam. Thank you very much. I am looking forward to seeing your responses.

    Sincerely,

    Julio Manson

  22. #22
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Espaņa
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To make this script works with any destination element with an id attribute... not necessarely an anchor.. just replace

    var allLinks = document.getElementsByTagName('a');
    var destinationLink = null;
    for (var i=0;i<allLinks.length;i++) {
    var lnk = allLinks[i];
    if (lnk.name && (lnk.name == anchor)) {
    destinationLink = lnk;
    break;
    }
    for:

    destinationLink = getObjById(anchor);

    and getObjById is a x-browser function for referring to an object:
    function getObjById(name)
    {
    if (document.getElementById)
    {
    this.obj = document.getElementById(name);
    }
    else if (document.all)
    {
    this.obj = document.all[name];
    }
    else if (document.layers)
    {
    this.obj = document.layers[name];
    }
    return this.obj;
    }

  23. #23
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Espaņa
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, that was posted... I just saw the last three messages on the article's page...

  24. #24
    Nicholas Rougeux
    SitePoint Community Guest
    This doesn't work in Safari 1.3. When you click a link, it scrolls all the way to the bottom then reloads the page and then lands at the intended anchor. Same thing happens in OmniWeb 4.5 and 5.1 but without the scrolling.

  25. #25
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up slightly more optimized...

    Thanks for the great article! One quick note:

    It's a little more efficient in JavaScript (and pretty much any language) to calculate lengths outside of the for loop. like this:

    Code:
    var myLength = allLinks.length;
    then inside the for loop do:

    Code:
    for (var i=0;i<myLength;i++) {
    This is more efficient because the script doesn't have to re-calculate or count the length each time through the loop.

    More tips like this can be found (on occasion) here:
    http://www.codedump.com/


    Again, thanks for the great write up -- I'll be using this one right away.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •