Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    Problem with content sliding

    Hello,

    So i am using this page scrolling script, which yes, is written specifically for the whole page to scroll, i am trying to make a div scroll. Which is working for me, but sliding in a very weird way, it kind of jumps. Anyone know why??

    Thanks in advance!! Code and link below!

    http://experiencemediaonline.gorilla....com/services/ <-- click on the side menu links, see how it slides then jumps??

    Code:
    	$(function() {
    	
    		function filterPath(string) {
    			return string
    			.replace(/^\//,'')
    			.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    			.replace(/\/$/,'');
    		}
    	
    		var locationPath = filterPath(location.pathname);
    		var scrollElem = scrollableElement('div#services');
    	
    		// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    		$('a[href*=#]').each(function() {
    	
    			// Ensure it's a same-page link
    			var thisPath = filterPath(this.pathname) || locationPath;
    			if (  locationPath == thisPath
    				&& (location.hostname == this.hostname || !this.hostname)
    				&& this.hash.replace(/#/,'') ) {
    	
    					// Ensure target exists
    					var $target = $(this.hash), target = this.hash;
    					if (target) {
    	
    						// Find location of target
    						var targetOffset = $target.offset().top;
    						$(this).click(function(event) {
    	
    							// Prevent jump-down
    							event.preventDefault();
    	
    							// Animate to target
    							$(scrollElem).animate({scrollTop: targetOffset}, 700, function() {
    	
    								// Set hash in URL after animation successful
    								location.hash = target;
    	
    							});
    						});
    					}
    			}
    	
    		});
    	
    		// Use the first element that is "scrollable"  (cross-browser fix?)
    		function scrollableElement(els) {
    			for (var i = 0, argLength = arguments.length; i <argLength; i++) {
    				var el = arguments[i],
    				$scrollElement = $(el);
    				if ($scrollElement.scrollTop()> 0) {
    					return el;
    				} else {
    					$scrollElement.scrollTop(1);
    					var isScrollable = $scrollElement.scrollTop()> 0;
    					$scrollElement.scrollTop(0);
    					if (isScrollable) {
    						return el;
    					}
    				}
    			}
    			return [];
    		}
    	
    	});

  • #2
    Regular Coder oVTech's Avatar
    Join Date
    Nov 2010
    Location
    USA
    Posts
    296
    Thanks
    4
    Thanked 54 Times in 52 Posts
    It works smoothly on a Macbook. This is what I use for scrolling(a lot simpler if you manage to make it work for your purpose):
    Code:
        $('a[href=#top]').click(function(){//when this is clicked: <a href="#top">Back to top</a>
            $('html, body').animate({scrollTop:0}, 'slow');
            return false;
        });
    
    //and then add a link to where you want to scroll:  <a name="top"></a>
    Last edited by oVTech; 02-20-2011 at 07:15 AM.




    I don't know, I don't care, and it doesn't make any difference!
    -Albert Einstein-




  • The Following 2 Users Say Thank You to oVTech For This Useful Post:

    eberdome (02-20-2011), TomCat (02-20-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    Thanks!! I ended up going a different route, but I could use this if i change my mind! Thanks again!


  •  

    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
    •