Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Hi,

    I am redesigning my site and I am planning to use both a smooth scrolling tool and a jquery tab feature. The problem is that they both use internal anchors to operate, so when I click on a tab, it will smooth scroll down to it. Not what I want.Thus, I figure that the smooth scroll function can be applied to only a hrefs located in a specific div. Anyone know how to do this? I know it's probably an easy fix, but I am worthless when it comes to composing javascript logic.

    Here is the smooth scroll text, from CSS-Tricks.

    Code:
    <script>
        $(function() {
    
            function filterPath(string) {
                return string
                .replace(/^\//,'')
                .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
                .replace(/\/$/,'');
            }
    
            var locationPath = filterPath(location.pathname);
            var scrollElem = scrollableElement('html', 'body');
    
            // 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}, 400, 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 [];
            }
    
        });
        </script>
    I'm guessing I manipulate this: $('a[href*=#]').each(function() ???

    -R

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:46 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com