<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Smooth Scrolling with jQuery.ScrollTo()</title>
<script src="jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="script.js"></script>
<style>
.largeBox { min-width: 300px; height:300px; border: 1px solid red;}
.toNav {font-size: 20px; font-color: red;}
</style>
</head>
<body>
<h1>Smooth Scrolling with the jQuery Plugin .ScrollTo</h1>
<div>Based on a question this plunk is a demo for
<a href="http://stackoverflow.com/questions/17722497#17742056">this answer</a><br /></div>
<div id="nav-list">
<a href="#idElement1">Scroll to element 1</a>
<a href="#idElement2">Scroll to element 2</a>
<a href="#idElement3">Scroll to element 3</a>
<a href="#idElement4">Scroll to element 4</a>
</div>
<h2 id="idElement1">Element1</h2>
<a class="toNav" href="#nav-list">Scroll to nav</a>
<div class="largeBox">Some text</div>
<h2 id="idElement2">Element2</h2>
<a class="toNav" href="#nav-list">Scroll to nav</a>
<div class="largeBox">Some text</div>
<h2 id="idElement3">Element3</h2>
<a class="toNav" href="#nav-list">Scroll to nav</a>
<div class="largeBox">Some text</div>
<h2 id="idElement4">Element4</h2>
<a class="toNav" href="#nav-list">Scroll to nav</a>
<div class="largeBox">Some text</div>
<a class="toNav" href="#nav-list">Scroll to nav</a>
<div class="largeBox">Some text</div>
<div class="largeBox">Some text</div>
<div class="largeBox">Some text</div>
</body>
</html>
// Code goes here
jQuery(function( $ ){
/**
* Demo binding and preparation, no need to read this part
*/
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
// This one is important, many browsers don't reset scroll on refreshes
// Reset all scrollable panes to (0,0)
$('div.pane').scrollTo( 0 );
// Reset the screen to (0,0)
$.scrollTo( 0 );
// adding a click handler for each link within the div with the id nav-list
$('#nav-list a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
$.scrollTo( this.hash, 1500, { easing:'elasout' });
return false;
});
// adding a click handler for the link at the bottom
$('a.toNav').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
var scrollTargetId = this.hash;
$.scrollTo( scrollTargetId, 1500, { easing:'elasout' });
return false;
});
});
/* Styles go here */
/**
* Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* @author Ariel Flesler
* @version 1.4.3.1
*/
;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);