Giter Club home page Giter Club logo

smoothscroll's Introduction

smoothScroll

A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no dependancy.

smoothScroll will tie all your internal links to a handler that will produce a smooth scroll to their target instead of an instant jump. It also returns an API that you can use to call a smooth scroll yourself.

This works in Firefox, Chrome, IE10, Opera and Safari. Unsupported browsers would just use the normal internal link behaviour.

How to use

Just include smoothscroll inside your page, like this:

<script type="text/javascript" src="path/to/smoothscroll.min.js"></script>

All your internal links will be tied to a smooth scroll. If you want to call a smooth scroll from your code, you can now use the API by calling:

window.smoothScroll(target, duration, callback, context)

where:

  • target is a HTMLElement Object from your document that you want to scroll to, or a numeric position on the page
  • duration is the total duration of the scroll (optional, defaults to 500ms)
  • callback is a function to be executed when the scrolling is over (optional)
  • context is the scrolling context (optional, defaults to window, can be any HTMLElement Object)

Alternatively, you can install smoothscroll as a dependency using npm:

npm install --save smoothscroll

Example usage as a module, binding to a custom element:

var smoothScroll = require('smoothscroll');

var exampleBtn = document.querySelector('.example-button');
var exampleDestination = document.querySelector('.example-destination');

// This function can easily be an onClick handler in React components
var handleClick = function(event) {
  event.preventDefault();

  smoothScroll(exampleDestination);
};

exampleBtn.addEventListener('click', handleClick);

smoothscroll.js

Here are some indications if you want to tweak the code to fit your needs:

There is an ease-in-out type timing function. You can change it quite easily in the code. Here is where I found the one I use:

You can also change the default duration of a scroll, which is 500ms by default.

My code is heavily commented so you shoudn't lose yourself too much.

Example

The example.html file is basically the script applied to a w3c page. I just changed the style so the table of content is fixed to the left.

Check out the result. Wouldn't it be great if all w3c specs where that easy to navigate in?

Similar scripts

While I was looking for a name for this script, I found these sites. If this script is not what you need, you might have more luck there:

License

This library is released under the MIT license.

smoothscroll's People

Contributors

7cc avatar afmklk avatar ahoym avatar alicelieutier avatar fenok avatar kennethormandy avatar selbekk avatar shlajin avatar t1mmen avatar wridgers 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

smoothscroll's Issues

publish a new version

Hi,

could you please tag a new version with the latest fixes and publish it?

It's not urgent or anything, just more convenient for our project dependencies to go through npm rather than a github commit link. (we need the fix for #26 especially)

Thanks!

Context and scrollTop

Hi and thanks for this lib.
I have a pen for illustrate the problem : http://codepen.io/JiDai/pen/VKqvoZ
I can't make it work when using context. I tried different things like changing position or overflow CSS properties but nothing worked. The top values calculate is equal to 0. How can I resolve that ?

Not triggered in some react-bootstrap components

I am using this with react-bootstrap components.
I have imported smoothscroll with import Scroll from 'smoothscroll' in the render() method.

All dropdown items do not work, except those in <Nav pullRight>.
<Nav> <NavDropdown eventKey={2} title="About" id="basic-nav-dropdown"> <MenuItem eventKey={2.1} href="#bio">Biography</MenuItem> <MenuItem divider /> <MenuItem eventKey={2.2} href="#edu">Education</MenuItem> <MenuItem eventKey={2.3} href="#employ">Employment</MenuItem> <MenuItem eventKey={2.4} href="#honor">Honors</MenuItem> <MenuItem eventKey={2.5} href="#award">Academic Awards</MenuItem> </NavDropdown> </Nav> <Nav pullRight> <NavItem eventKey={1} href="#research"> <i className="glyphicon glyphicon-book"></i> Research </NavItem> <NavItem eventKey={2} href="#service"> <i className="glyphicon glyphicon-briefcase"></i> Service </NavItem> <NavItem eventKey={3} href="#contact"> <i className="glyphicon glyphicon-earphone"></i> Contact </NavItem> </Nav>

The offset is not correct

goPosition (selector, flag, event) {
event.preventDefault();
this.currentFlag = flag;
var anchor = this.$el.querySelector(selector);
smoothScroll(anchor, 500, null, this.$refs.scrollView);
}
I am using the context,but The offset is not correct

multiple issues when context isn't window

  • scroll jumps to 0 then animates to end position (this is because window.pageYOffset is used even when context !== window
  • scroll end position is often incorrect, e.g. when context.scrollTop !== 0
  • smooth scrolling to the end doesn't ease out in some cases. Solution: clamp the end position to context.scrollHeight - context.offsetHeight

These issues are fixed in my PR #20

Back doesn't work

When clicking back, the address bar is updated (hash part changes, as expected), but the page doesn't change. I've tried latest version of both FF and Chrome.

Intercepts clicks on links and cancels them

Trying to use this with react-router, it fails if element is null in the function getTop, breaking the app if the element to scroll to hasn't been rendered (e.g. because it's on a different page of the app). It also seems to fiddle in various ways with the location which also risks breaking apps.

It's a shame because it was doing exactly what I wanted until I noticed this.

Feature request: offset

Add the option to add an offset to the scroll. Specifically solves a scenario where there's a fixed header and scrolling to an element scrolls beyond the header.

pushState can push same history

In Demo, click the first internal link (1. Introduction) twice, then browser history will be
no hash -> #context -> #context

When location.hash and the clicked a-element's hash are the same, just scroll or replaceState would be good.

re-initialize after DOM change?

I'm using smoothScroll on a single-page app (with nuxt.js). On loading the site at first or after refresh everything works as expected. After a page change (effectively the DOM is manipulated), it does not work anymore.
I assume I'll have to re-initialize the library in some way, so it fetches the latest DOM contents?
Is there a method to do this?

Error thrown if hash is not found

If I have a hash on my site that doesn't have a matching ID anywhere, smoothscroll throws an error:

image

Would be great if that didn't happen. This actually breaks my single page app navigation, that uses hash history to deal with routing.

remove DOMContentLoaded listener

Just run the code when the factory is ran. The reason for this is the code may never run due to <script async>

I already handle such myself with:

function init() {
  require("es6-promise").polyfill();
  require("smoothscroll");
}

if (document.readyState !== "loading") {
  init();
} else {
  document.addEventListener("DOMContentLoaded", init);
}

But my fragment/hash links are not getting the event listeners.

Support isomorphic environments

This seemed to be an elegant alternative to jquery's animate function, but I need it to be able to load in a server-side rendering environment.

Is it in your roadmap?

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.