mathiasbynens / jquery-smooth-scrolling

Smooth anchor scrolling plugin for jQuery.

Smooth Scrolling jQuery Plugin

Notice

Nowadays you should really use scroll-behavior: smooth; in CSS instead of a JavaScript solution.

Demo & Examples

https://mathiasbynens.be/demo/smooth-scrolling

Example Usage

Simple – Inside entire document

Find all links to anchors in the same document, and make them scroll smoothly when clicked:

$('html').smoothScroll();

Simple – Inside a specified element

Find all links to anchors in the same document inside #content, and make them scroll smoothly when clicked:

$('#content').smoothScroll();

Specifying animation speed

$('html').smoothScroll(300);

– Mathias

jquery-smooth-scrolling's Issues

smooth scroll doesn't work in google chrome

clicking links doesn't do anything, but no error is printed to the console either.

Q: can/should/could this work on iOs?

I might be missing something obvious but smoothscrolling does not seem to work on my iPad. Is this known behaviour or a bug?

Cannot alter the smooth scroll offset

Hey, thanks so much for making this repo.
When I try to subtract the scroll offset by my fixed header height the browser glitches up.

Here is my code

`

/*! http://mths.be/smoothscroll v1.5.2 by @mathias */
var navbar = $('.nav-header-wrapper').height();
;(function(document, $) {

var $scrollElement = (function() {
    // Find out what to scroll (html or body)
    	var $html = $(document.documentElement),
    	    $body = $(document.body),
    	    bodyScrollTop;
    	if ($html.scrollTop()) {
    		return $html;
    	} else {
    		bodyScrollTop = $body.scrollTop();
    		// If scrolling the body doesn’t do anything
    		if ($body.scrollTop(bodyScrollTop + 1).scrollTop() == bodyScrollTop) {
    			return $html;
    		} else {
    			// We actually scrolled, so undo it
    			return $body.scrollTop(bodyScrollTop);
    		}
    	}
    }());

$.fn.smoothScroll = function(speed) {
	speed = ~~speed || 500;
	// Look for links to anchors (on any page)
	return this.find('a[href*="#"]').click(function(event) {
		var hash = this.hash,
		    $hash = $(hash); // The in-document element the link points to
		// If it’s a link to an anchor in the same document
		if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
			// If the anchor actually exists…
			if ($hash.length) {
				// …don’t jump to the link right away…
				event.preventDefault();
				// …and smoothly scroll to it
				$scrollElement.stop().animate({ 'scrollTop': $hash.offset().top - navbar}, speed, function() {
					location.hash = hash;
				});
			}
		}
	}).end();
};

}(document, jQuery));
`
am I doing this wrong?

Any thoughts?

easing option

wouldn't be better to have a second parameter for the call which specify the kind of easing has to be passed to jquery animate function?
i can provide a pull request, if needed.

Always scrolls from top in Opera 10.53

The plugin always starts scrolling from the top of the document (instead of the current scroll location) in Opera 10.53.

It doesn't work if you set html{height:100%};

What title says, it stops working.

Actually it's not working if you sett both height:100% on html and body.

Links to Other Page Anchors Not Working

I have a site, http://example.com

On that site there are anchors and links to those anchors. Smooth scrolling works for those using your plugin.

However there are also links pages that link to anchors on "other" pages that do not work.

For instance on http://example.com/page1.html I may have a link to http://example.com/page2.html#myanchor

If I disable your plugin code it works as expected, jumps to the anchor on that other page. With your plugin enabled it smoothly scrolls to the top of the same page (not the other page it's suppose to).

I can understand the smooth scrolling effect might not work on the linked page, but this plugin actually blocks it from jumping to the other page at all. Let me know if you need more details or a way I can fix this. Thanks!

Simpler html/body feature test

operasoftware/devopera#242

[enhancement] Add missing bower.json.

Hey, maintainer(s) of mathiasbynens/jquery-smooth-scrolling!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library mathiasbynens/jquery-smooth-scrolling is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "mathiasbynens/jquery-smooth-scrolling",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!