• Edit
  • Delete

js jq scroll to

Basic scroll to

http://flesler.blogspot.co.at/2007/10/jqueryscrollto.html

Scroll to anchors

http://flesler.blogspot.co.at/2007/10/jquerylocalscroll-10.html

<?php use_javascript('/ullCorePlugin/js/jq/jquery.scrollTo.min.js') ?>
<?php use_javascript('/ullCorePlugin/js/jq/jquery.localScroll.min.js') ?>

<script type="text/javascript">
  $(window).load(function() {

    // scroll to local anchors
        $.localScroll({
            queue: true,
            duration: 800,
            offset: {left: 0, top: -80 },
            hash: true,
        });
         
  });
</script>

Scroll to fixed

https://github.com/bigspotteddog/ScrollToFixed

<?php use_javascript('/js/jquery-scrolltofixed-min.js') ?>

<script type="text/javascript">
  $(window).load(function() {
    $("header").scrollToFixed();   
    //or wait till the element comes into view and stop at 
    $("#sidebar").scrollToFixed({ marginTop: 133 });
  });
</script>

Options

  • bottom: 0, // false = do not fix, integer 0 or bigger: fix with given margin to bottom of window
  • marginTop: 200, // while scrolling down: unfixes element 200px before it reaches it's original position
  • limit: the vertical scroll position at which the element gets unfixed and scrolls with the page
    0 or false or void = always fixed
    1 = always scrolls with page
    • Example: fix element until it reaches original position, than scroll normally with the page:
      • // offset().top = number of pixels from top of document to top of element
        limit: $('#element').offset().top 
    • Example fix an element only for a specific region on the page:
      •     // number of pixels between document top and region top
            //   minus the window height, to trigger already when region comes into view
            var region_top = $('#region').offset().top - $(window).height();
            // number of pixels between document top and element top
            var element_top = $('#element').offset().top
            
            $("#element").scrollToFixed({
                bottom: 0, // false = do not fix, integer 0 or bigger: fix with bottom margin
                limit: function() {
                  var window_scroll_position = window.pageYOffset || document.documentElement.scrollTop;
                  //console.log(window_scroll_position);
        
                  if (window_scroll_position < region_top) {
                    return 1; // always scroll with page
                  }
                  
                  // default, scroll above, fixed below
                  return element_top;
                }
            });