www.webdeveloper.com
Results 1 to 3 of 3

Thread: Scroll using links

  1. #1
    Join Date
    Feb 2011
    Posts
    8

    Scroll using links

    I want to achieve the effect seen on the website http://scribbleandtweak.com/. When the link is clicked, the page scrolls down to the corresponding content. I have achieved this by using the Javascript attached below. However, I am having difficulty making the page scroll when a link is clicked inside another frame or div. Notice how on http://scribbleandtweak.com/ the header and navigation remains in view when the page scrolls. This is in essence what I wish to achieve. Any ideas? Thank you in advance.

    Code:
    <script language="javascript">
    var ss = {
      fixAllLinks: function() {
        // Get a list of all links in the page
        var allLinks = document.getElementsByTagName('a');
        // Walk through the list
        for (var i=0;i<allLinks.length;i++) {
          var lnk = allLinks[i];
          if ((lnk.href && lnk.href.indexOf('#') != -1) && 
              ( (lnk.pathname == location.pathname) ||
    	    ('/'+lnk.pathname == location.pathname) ) && 
              (lnk.search == location.search)) {
            // If the link is internal to the page (begins in #)
            // then attach the smoothScroll function as an onclick
            // event handler
            ss.addEvent(lnk,'click',ss.smoothScroll);
          }
        }
      },
    
      smoothScroll: function(e) {
        // This is an event handler; get the clicked on element,
        // in a cross-browser fashion
        if (window.event) {
          target = window.event.srcElement;
        } else if (e) {
          target = e.target;
        } else return;
    
        // Make sure that the target is an element, not a text node
        // within an element
        if (target.nodeName.toLowerCase() != 'a') {
          target = target.parentNode;
        }
      
        // Paranoia; check this is an A tag
        if (target.nodeName.toLowerCase() != 'a') return;
      
        // Find the <a name> tag corresponding to this href
        // First strip off the hash (first character)
        anchor = target.hash.substr(1);
        // 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;
          }
        }
        if (!destinationLink) destinationLink = document.getElementById(anchor);
    
        // If we didn't find a destination, give up and let the browser do
        // its thing
        if (!destinationLink) return true;
      
        // Find the destination's position
        var destx = destinationLink.offsetLeft; 
        var desty = destinationLink.offsetTop;
        var thisNode = destinationLink;
        while (thisNode.offsetParent && 
              (thisNode.offsetParent != document.body)) {
          thisNode = thisNode.offsetParent;
          destx += thisNode.offsetLeft;
          desty += thisNode.offsetTop;
        }
      
        // Stop any current scrolling
        clearInterval(ss.INTERVAL);
      
        cypos = ss.getCurrentYPos();
      
        ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
        ss.INTERVAL =
    setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
      
        // And stop the actual click happening
        if (window.event) {
          window.event.cancelBubble = true;
          window.event.returnValue = false;
        }
        if (e && e.preventDefault && e.stopPropagation) {
          e.preventDefault();
          e.stopPropagation();
        }
      },
    
      scrollWindow: function(scramount,dest,anchor) {
        wascypos = ss.getCurrentYPos();
        isAbove = (wascypos < dest);
        window.scrollTo(0,wascypos + scramount);
        iscypos = ss.getCurrentYPos();
        isAboveNow = (iscypos < dest);
        if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
          // if we've just scrolled past the destination, or
          // we haven't moved from the last scroll (i.e., we're at the
          // bottom of the page) then scroll exactly to the link
          window.scrollTo(0,dest);
          // cancel the repeating timer
          clearInterval(ss.INTERVAL);
          // and jump to the link directly so the URL's right
          location.hash = anchor;
        }
      },
    
      getCurrentYPos: function() {
        if (document.body && document.body.scrollTop)
          return document.body.scrollTop;
        if (document.documentElement && document.documentElement.scrollTop)
          return document.documentElement.scrollTop;
        if (window.pageYOffset)
          return window.pageYOffset;
        return 0;
      },
    
      addEvent: function(elm, evType, fn, useCapture) {
        // addEvent and removeEvent
        // cross-browser event handling for IE5+,  NS6 and Mozilla
        // By Scott Andrew
        if (elm.addEventListener){
          elm.addEventListener(evType, fn, useCapture);
          return true;
        } else if (elm.attachEvent){
          var r = elm.attachEvent("on"+evType, fn);
          return r;
        } else {
          alert("Handler could not be removed");
        }
      } 
    }
    
    ss.STEPS = 100;
    
    ss.addEvent(window,"load",ss.fixAllLinks);
    </script>


    P.S. Feel free to suggest refinements to the Javascript attached above.

  2. #2
    Join Date
    Aug 2010
    Posts
    22
    Well for now I can tell you that the site you referenced has 'position: fixed;' and 'top: 0px;' in the CSS for the header. This stops the header from scrolling with the page.

    I'm not sure from your post if that is your only problem but if not then a link to the page or a similar test page would be most helpful.

  3. #3
    Join Date
    Feb 2011
    Posts
    8
    Thanks, after applying position fixed in the CSS, it worked.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.35956 seconds
  • Memory Usage 2,879KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates