Giter Club home page Giter Club logo

smooth-scroll's Introduction

Smooth-Scroll

Adds smooth scrolling to anchor links within a page without any framework dependency.

Demo

http://gabrieldelepine.github.io/smooth-scroll/

Dependencies

None ! Smooth scroll is a framework-free standalone function (ie : You do not need to include any other file in your page such as jQuery)

How To Use

Include the smooth-scroll.js file to your web page. All anchor links will scroll smoothly.

If your layout includes a position: fixed header, your anchors will be hidden behind your header. To fix-it, change the height_fixed_header parameter within smooth-scroll.js to 1.

Bower

If you are using bower, just run bower install smooth-scroll

Npm

Just run npm install @gabriel-delepine/smooth-scroll

Compatibility

Smooth scroll is compatible with modern browsers only because it use the history API. For older browsers, it might be possible to get compatibility with https://github.com/browserstate/history.js

Size

The size of the minified version is 432 bytes ! (After gzip)

smooth-scroll's People

Contributors

gabrieldelepine avatar konsumer avatar marjanavoronina avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

smooth-scroll's Issues

Unfinished scrolling

Hi, I was using this on my site (from Stack Overflow) and had to add a little bit extra to get it to finish scrolling. Not quite sure why, but just thought I'd let you know. The further down the page (i.e. the greater pageYOffset) when the script was called, the bigger the distance was from the top.

    (function() // Code in a function to create an isolate scope
{
var speed = 500;
var moving_frequency = 15; // Affects performance !
var links = document.getElementsByTagName('a');
var href;
for(var i=0; i<links.length; i++)
{   
    href = (links[i].attributes.href === undefined) ? null : links[i].attributes.href.nodeValue.toString();
    if(href !== null && href.length > 1 && href.substr(0, 1) == '#')
    {
        links[i].onclick = function()
        {
            var element;
            var href = this.attributes.href.nodeValue.toString();
            if(element = document.getElementById(href.substr(1)))
            {
                var hop_count = speed/moving_frequency
                var getScrollTopDocumentAtBegin = getScrollTopDocument();
                var gap = (getScrollTopElement(element) - getScrollTopDocumentAtBegin) / hop_count;

                for(var i = 1; i <= hop_count; i++)
                {
                    (function()
                    {
                        var hop_top_position = gap*i;
                        setTimeout(function(){  window.scrollTo(0, hop_top_position + getScrollTopDocumentAtBegin); }, moving_frequency*i);
                    })();
                }
            }

            if (pageYOffset !== 0) {
                function incrementScroll() {
                    window.scrollBy(0, -4);
                    if (pageYOffset <= 4) {
                        window.scrollBy(0, -4);
                        stopScrollLoop();
                    }
                }
            var scrollLoopId;
            function startScrollLoop() {
                scrollLoopId = setInterval( incrementScroll, 20);
            }
            function stopScrollLoop() {
                clearInterval( scrollLoopId ) ;
            }
            startScrollLoop();
            }

            return false;
        };
    }
}

var getScrollTopElement =  function (e)
{
    var top = 0;

    while (e.offsetParent != undefined && e.offsetParent != null)
    {
        top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
        e = e.offsetParent;
    }

    return top;
};

var getScrollTopDocument = function()
{
    return document.documentElement.scrollTop + document.body.scrollTop;
};
})();

IE8 issue

IE8 return 2 errors with the 1.2 release and previous

  • Object Expected line 22
  • Object Expected line 35

issue with responsive nav header

it seems that the script makes the anchor based css navigation unusable when in mobile mode. It doesn't show the menu items. Is there an option to exclude it from the scroll feature?

Here's the page

Thanks

Chrome Bug

Hi,

The script worked perfectly in all browsers except for Chrome. When clicking on an anchor link, the script would send me to top of page before scrolling to the right anchor. In other words, the function starts the scroll from the top of the page on every click event.

Thought I would let you know. Otherwise, an excellent document.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.