I'm new to this community so excuse me if the answer to my question may come be stupid-simple. I've created this site on webflow: https://flumes-fantastic-site.webflow.io/ with the help of the jquery ripples library and I'm trying to make the automatic drops stop when I switch tabs or when the window is not on focus. This is because whenever I switch tabs and come back to it, the animation seems to have "loaded" and shoots all drops at once which looks kinda funny.
I'm new to coding so I'm probably messing up here with the code. This is what the developer of the library has in the documentation https://github.com/sirxemic/jquery.ripples/blob/master/demo/index.html:
<script src="../dist/jquery.ripples.js"></script>
<script>
$(document).ready(function() {
try {
$('body').ripples({
resolution: 512,
dropRadius: 20, //px
perturbance: 0.04,
});
$('main').ripples({
resolution: 128,
dropRadius: 10, //px
perturbance: 0.04,
interactive: false
});
}
catch (e) {
$('.error').show().text(e);
}
$('.js-ripples-disable').on('click', function() {
$('body, main').ripples('destroy');
$(this).hide();
});
$('.js-ripples-play').on('click', function() {
$('body, main').ripples('play');
});
$('.js-ripples-pause').on('click', function() {
$('body, main').ripples('pause');
});
// Automatic drops
setInterval(function() {
var $el = $('main');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}, 400);
});
</script>
And this is what I've come up with looking for answers in the community but isn't working:
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples#0.6.3/dist/jquery.ripples.min.js"></script>
<script>
$('#ripple').ripples({
resolution: 512,
dropRadius: 30,
perturbance: 0.04,
});
setInterval(function() {
var $el = $('#ripple');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 30;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}, 2500);
</script>
<script>
var window_focus;
$(window).focus(function() {
window_focus = true;
})
.blur(function() {
window_focus = false;
});
$(document).one('click',function() {
$('#ripple').ripples('play');
});
$(document).one('click',function() {
$('#ripple').ripples('pause');
});
setInterval(function() { $('body').append('has focus? ' + window_focus + '<br>'); }, 1000);
});
</script>
I'm sorry if the answer to this is super simple and I'm just wasting your time but i appreciate any help you can give me.
Thank you.
The key is to enable the timer when the window gets the focus, and disable it when the focus is lost:
function randomDrop() {
var $el = $('#ripple');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 30;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}
$(function() {
$('#ripple').ripples({
resolution: 512,
dropRadius: 30,
perturbance: 0.04
});
var timer = null;
$(window).focus(function() {
if (timer === null) {
//console.log('on');
timer = setInterval(randomDrop, 2500);
}
})
.blur(function() {
if (timer !== null) {
clearInterval(timer);
timer = null;
//console.log('off');
}
})
.focus();
});
<div class="container w-container">
<section class="hero wf-section">
<div class="w-embed"><div id="ripple" style="height:100%; Width: 100%; position: absolute; left 0%; top: 0%; right: 0%; bottom: 0%; background: url(https://i.ibb.co/kBgPMYY/wellness-hd.jpg) left top / cover;"></div>
</div>
</section>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=62f2d2e2cbc47f8cda0a15b9" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples#0.6.3/dist/jquery.ripples.min.js"></script>
Related
I have this piece of code:
var delta = _window.width() / 30, // resize hexagons by delta px
window_height = _window.height(); // .box-1/window height
$('.hexagon').each(function () { // get animated boxes
var $this = $(this),
width_1 = $this.width(),
height_1 = $this.height(),
multi = 0, // adjust resize to scroll speed (depends on delta)
ratio = 1.167; // to calculate height
// animation properties
var enlarge_obj = {
width: function() {return width_1 += (delta * multi)},
height: function() {return width_1 * ratio}
},
shrink_obj = {
width: function() {return width_1 -= (delta * multi)},
height: function() {return width_1 * ratio}
};
....
function scrollHandler() {
...
$this.animate(enlarge_obj, 0, 'linear');
...
$this.animate(shrink_obj, 0, 'linear');
}
}
I want to pass enlarge_obj and shrink_obj to jQuery animate function.
But it doesn't work.
If I write code like this:
$this.animate({width: width_1 += (delta * multi), height: width_1 * ratio},0,'linear');
it works fine.
What am I doing wrong? Thx.
I need help only having the anchors for rotating. Right now there is five anchors and I don't know how to get rid of all of them except the rotate one. I would also only like the anchors to show when the user hovers over the image
Here is my code
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<body onmousedown="return false;">
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js">
</script>
<script>
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rotateAnchor = group.get('.rotateAnchor')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
var imageWidth = image.getWidth();
var imageHeight = image.getHeight();
var offsetX = Math.abs((topLeft.getX() + bottomRight.getX() + 10) / 2);
var offsetY = Math.abs((topLeft.getY() + bottomRight.getY() + 10) / 2);
// update anchor positions
switch (activeAnchor.getName()) {
case 'rotateAnchor':
group.setOffset(offsetX, offsetY);
break;
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
topRight.setX(anchorX);
bottomLeft.setY(anchorY);
break;
case 'bottomLeft':
topLeft.setX(anchorX);
bottomRight.setY(anchorY);
break;
}
rotateAnchor.setX(topRight.getX() + 5);
rotateAnchor.setY(topRight.getY() + 20);
image.setPosition((topLeft.getPosition().x + 20), (topLeft.getPosition().y + 20));
var width = topRight.getX() - topLeft.getX() - 30;
var height = bottomLeft.getY() - topLeft.getY() - 30;
if (width && height) {
image.setSize(width, height);
}
}
function addAnchor(group, x, y, name, dragBound) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
if (dragBound == 'rotate') {
anchor.setAttrs({
dragBoundFunc: function (pos) {
return getRotatingAnchorBounds(pos, group);
}
});
}
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function getRotatingAnchorBounds(pos, group) {
var topLeft = group.get('.topLeft')[0];
var bottomRight = group.get('.bottomRight')[0];
var topRight = group.get('.topRight')[0];
var absCenterX = Math.abs((topLeft.getAbsolutePosition().x + 5 + bottomRight.getAbsolutePosition().x + 5) / 2);
var absCenterY = Math.abs((topLeft.getAbsolutePosition().y + 5 + bottomRight.getAbsolutePosition().y + 5) / 2);
var relCenterX = Math.abs((topLeft.getX() + bottomRight.getX()) / 2);
var relCenterY = Math.abs((topLeft.getY() + bottomRight.getY()) / 2);
var radius = distance(relCenterX, relCenterY, topRight.getX() + 5, topRight.getY() + 20);
var scale = radius / distance(pos.x, pos.y, absCenterX, absCenterY);
var realRotation = Math.round(degrees(angle(relCenterX, relCenterY, topRight.getX() + 5, topRight.getY() + 20)));
var rotation = Math.round(degrees(angle(absCenterX, absCenterY, pos.x, pos.y)));
rotation -= realRotation;
group.setRotationDeg(rotation);
return {
y: Math.round((pos.y - absCenterY) * scale + absCenterY),
x: Math.round((pos.x - absCenterX) * scale + absCenterX)
};
}
function radians(degrees) { return degrees * (Math.PI / 180); }
function degrees(radians) { return radians * (180 / Math.PI); }
// Calculate the angle between two points.
function angle(cx, cy, px, py) {
var x = cx - px;
var y = cy - py;
return Math.atan2(-y, -x);
}
// Calculate the distance between two points.
function distance(p1x, p1y, p2x, p2y) {
return Math.sqrt(Math.pow((p2x - p1x), 2) + Math.pow((p2y - p1y), 2));
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, -20, -20, 'topLeft', 'none');
addAnchor(darthVaderGroup, 220, -20, 'topRight', 'none');
addAnchor(darthVaderGroup, 220, 158, 'bottomRight', 'none');
addAnchor(darthVaderGroup, -20, 158, 'bottomLeft','none');
addAnchor(darthVaderGroup, 225, 0, 'rotateAnchor','rotate');
darthVaderGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
var sources = {
darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
};
loadImages(sources, initStage);
</script>
</body>
</html>
You can use each anchors show/hide methods inside the images mouseenter/mouseleave events to display the anchors when the mouse enters the image:
image.on("mouseleave",function(){ anchor1.hide(); }
image.on("mouseenter",function(){ anchor1.show(); layer.draw(); }
Problem is that since your anchors are partly outside your image, so hiding the anchors when the mouse leaves the image might make the anchors "disappear" when the user intends to use them.
The ideal solution would be to listen for mouseenter/mouseleave events on the group which contains the image but also extends to include the outside part of the anchors. Unfortunately, a Kinetic.Group will not respond to mouseenter/mouseleave events.
A workaround is to create a Kinetic.Rect background to the group which includes the images plus the anchors. The rect will listen for mouseenter/mouseleave events and will show/hide the anchors. If you don't want the background rect to be visible, just set it's opacity to .001. The rect will still listen for events, but will be invisible.
groupBackgroundRect.on("mouseleave",function(){ anchor1.hide(); }
groupBackgroundRect.on("mouseenter",function(){ anchor1.show(); layer.draw(); }
A related note:
With KineticJS, combining rotation with resizing is made more difficult than it needs to be because KineticJS uses offsetX/offsetY as both an object's rotation point and as an offset to its position. Your key to making it work will be to re-center the offset point after resizing so that your rotation takes place around the new centerpoint--not the previous centerpoint. (or reset the offset reference point to any other point that you want to rotate around).
I have created a random fishes animation but at some point (about 10sec) from the beginning, my fishes Cling to the right, i want them to keep moving in random all over the area, any idea?
here is the fiddle link: http://jsfiddle.net/832Fx/1/
jquery code:
$.fn.rotate = function (degrees) {
var self = $(this);
self.transition({
rotateY: degrees + 'deg'
}, 5000);
};
var animeVars = {
maxPixelsPerSecond: 50,
minPixelsPerSecond: 10,
topMargin: 0,
bottomMargin: 400,
leftMargin: 0,
rightMargin: 400
};
function topFlip(obj) {
var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
$(obj).find('.top_fin, .top_fins').transition({
rotate: '+=25deg',
x: '+=10'
}, speed, function () {
$(obj).find('.top_fin, .top_fins').transition({
rotate: '-=25deg',
x: '-=10'
}, speed, function () {
topFlip(obj);
});
});
}
function tailFlip(obj) {
var speed = $(obj).data('speed') ? (1 / parseFloat($(obj).data('speed'))) * 1000000 : 300;
$(obj).find('.tail_fin, .tail_fins').transition({
rotateX: '-=25deg'
}, speed, function () {
$(obj).find('.tail_fin, .tail_fins').transition({
rotateX: '+=25deg'
}, speed, function () {
tailFlip(obj);
});
});
}
function animateFish(obj) {
var heading = $(obj).data('heading');
if (!heading) heading = 'left';
var rotation = 0;
var currentCoords = {
top: parseInt($(obj).css('top').replace(/[^-\d\.]/g, ''), 10),
left: parseInt($(obj).css('left').replace(/[^-\d\.]/g, ''), 10)
};
var newCoords = {
top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + 1) + animeVars.bottomMargin,
left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + 1) + animeVars.rightMargin
};
if (currentCoords.left < newCoords.left && heading != 'right') {
$(obj).rotate(180);
$(obj).data('heading', 'right');
console.log('swimming right');
} else if (currentCoords.left > newCoords.left && heading != 'left') {
$(obj).rotate(0);
$(obj).data('heading', 'left');
console.log('swimming left');
}
var totalMovement = Math.sqrt(Math.pow(currentCoords.left - newCoords.left, 2) + Math.pow(currentCoords.top - newCoords.top, 2));
console.log('Total pixels to move: ' + totalMovement);
var pps = Math.floor(Math.random() * (animeVars.maxPixelsPerSecond - animeVars.maxPixelsPerSecond)) + animeVars.maxPixelsPerSecond;
var speed = totalMovement / pps * 1000;
$(obj).data('speed', speed);
$(obj).animate({
top: newCoords.top,
left: newCoords.left
}, speed, function () {
animateFish(obj);
});
}
$(document).ready(function () {
$('.loop ').each(function () {
animateFish(this);
topFlip(this);
tailFlip(this);
});
});
Here is how I would fix this: http://jsfiddle.net/BaliBalo/832Fx/2/
I just added
var $wnd = $(window);
$wnd.resize(function() {
animeVars.rightMargin = $wnd.width();
animeVars.bottomMargin = $wnd.height();
}).resize();
at the end of your code, and changed the algorithm a bit to take in account fishes size:
var w = $(obj).width();
var h = $(obj).height();
var newCoords = {
top: Math.random() * (animeVars.topMargin - animeVars.bottomMargin + h + 1) + animeVars.bottomMargin - h,
left: Math.random() * (animeVars.leftMargin - animeVars.rightMargin + w + 1) + animeVars.rightMargin - w
};
However, please note that many optimizations could be done, like caching jQuery objects in variables rather than calling the $ function every time.
I have an image of a wheel of fortune wheel and I am trying to make so that when it spins it displays the correct amount for what it was spun to.
I have the following code: http://jsfiddle.net/maniator/rR67s/
Many times it is correct, and other time is is wrong.
For example I spun this:
And it alerted 300, which is wrong.
How can I fix my algorithm so that it is correct 99% of the time (or 100% if it is possible)?
HTML:
<div id="game">
<div id="tick">⇩</div>
<img id="wheel" src="http://i.imgur.com/R7JYazp.png" data-rotation="0">
</div>
Javascript:
var Wheel = (function () {
var wheel = document.getElementById('wheel'),
wheelValues = [5000, 600, 500, 300, 500, 800, 550, 400, 300, 900, 500, 300, 900, 0, 600, 400, 300, -2, 800, 350, 450, 700, 300, 600],
spinTimeout = false,
spinModifier = function () {
return Math.random() * 10 + 20;
},
modifier = spinModifier(),
slowdownSpeed = 0.5,
prefix = (function () {
if (document.body.style.MozTransform !== undefined) {
return "MozTransform";
} else if (document.body.style.WebkitTransform !== undefined) {
return "WebkitTransform";
} else if (document.body.style.OTransform !== undefined) {
return "OTransform";
} else {
return "";
}
}()),
degreeToRadian = function (deg) {
return deg / (Math.PI * 180);
};
function Wheel() {};
Wheel.prototype.rotate = function (degrees) {
var val = "rotate(-" + degrees + "deg)";
if (wheel.style[prefix] != undefined) wheel.style[prefix] = val;
var rad = degreeToRadian(degrees % 360),
filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + rad + ", M12=-" + rad + ", M21=" + rad + ", M22=" + rad + ")";
if (wheel.style["filter"] != undefined) wheel.style["filter"] = filter;
wheel.setAttribute("data-rotation", degrees);
};
Wheel.prototype.spin = function (callback, amount) {
var _this = this;
clearTimeout(spinTimeout);
modifier -= slowdownSpeed;
if (amount === undefined) {
amount = parseInt(wheel.getAttribute('data-rotation'));
}
this.rotate(amount);
if (modifier > 0) {
spinTimeout = setTimeout(function () {
_this.spin(callback, amount + modifier);
}, 1000 / 5);
} else {
var dataRotation = parseInt(wheel.getAttribute('data-rotation'));
modifier = spinModifier();
var divider = 360 / wheelValues.length;
var wheelValue = wheelValues[Math.floor(Math.round(dataRotation % 360) / divider)];
switch (wheelValue) {
case 0:
return callback(0);
case -1:
return callback("Free Spin");
case -2:
return callback("Lose a turn");
default:
return callback(wheelValue);
}
}
};
return Wheel;
})();
var wheel = new Wheel;
wheel.spin(function(spinVal){
alert(spinVal)
});
Full game for those who want to try it out: http://jsfiddle.net/maniator/XP9Qv/ (<-- this was updated using accepted answer)
The fun continues here.
I think the problem is that the arrow in the starting position is in the middle of a zone, not at the start of it. So you have a starting offset of (360 / wheelValues.length)/2
var divider = 360 / wheelValues.length;
var offset=divider/2; //half division
var wheelValue = wheelValues[Math.floor(Math.ceil((dataRotation+offset) % 360) / divider)];
This seems to work: when the wheel stops either at the beginning (first half) or at the end (last half) of a zone the showed value is the expected one (just about a dozen tests done)
var wheelValue = wheelValues[Math.floor(Math.ceil(dataRotation % 360) / 15)];
switch (wheelValue) {
I changed this line from round to ceil and got 14 out of 14 correct results..
how can i add an easing/animation/slowly moving to this function?
At the moment it just jumps.
Now it should move to the "anchor" with an animation.
<script type='text/javascript'>
setTimeout("window.scrollBy(0,270);",3000);
</script>
also possible with plain javascript using request animation frame..
// first add raf shim
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// main function
function scrollToY(scrollTargetY, speed, easing) {
// scrollTargetY: the target scrollY property of the window
// speed: time in pixels per second
// easing: easing equation to use
var scrollY = window.scrollY,
scrollTargetY = scrollTargetY || 0,
speed = speed || 2000,
easing = easing || 'easeOutSine',
currentTime = 0;
// min time .1, max time .8 seconds
var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
// easing equations from https://github.com/danro/easing-js/blob/master/easing.js
var PI_D2 = Math.PI / 2,
easingEquations = {
easeOutSine: function (pos) {
return Math.sin(pos * (Math.PI / 2));
},
easeInOutSine: function (pos) {
return (-0.5 * (Math.cos(Math.PI * pos) - 1));
},
easeInOutQuint: function (pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 5);
}
return 0.5 * (Math.pow((pos - 2), 5) + 2);
}
};
// add animation loop
function tick() {
currentTime += 1 / 60;
var p = currentTime / time;
var t = easingEquations[easing](p);
if (p < 1) {
requestAnimFrame(tick);
window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
} else {
console.log('scroll done');
window.scrollTo(0, scrollTargetY);
}
}
// call it once to get started
tick();
}
// scroll it!
scrollToY(0, 1500, 'easeInOutQuint');
For anyone viewing this question in 2019: this can now be done natively by using
window.scrollBy({
top: 0,
left: 270,
behavior: 'smooth'
});
This works in all major browsers except edge and safari. See https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy#Examples
Adapted from this answer:
function scrollBy(distance, duration) {
var initialY = document.body.scrollTop;
var y = initialY + distance;
var baseY = (initialY + y) * 0.5;
var difference = initialY - baseY;
var startTime = performance.now();
function step() {
var normalizedTime = (performance.now() - startTime) / duration;
if (normalizedTime > 1) normalizedTime = 1;
window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
if (normalizedTime < 1) window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
This should allow you to smoothly scroll by the specified distance.
This will Work, Assume you need to Smooth-scrolls to the top of the page.
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
Another example with jQuery, uses the easing plugin for some nice effects:
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
got it myself. because of wordpress and the jquery.noConflict Mode i hade to modify the code:
<script type="text/javascript">
(function($){
$(document).ready(function(){
setTimeout(function() {
$('body').scrollTo( '300px', 2500 );
}, 3000);
});
}(jQuery));
</script>
thanks for everybody!!!
When using jQuery, you could easily use the .animate function.
Here's an example on how it should work.
Using jQuery makes this much easier, perhaps with the scrollto plugin. http://flesler.blogspot.se/2007/10/jqueryscrollto.html
Consider a solution such:
<script type='text/javascript' src='js/jquery.1.7.2.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script><!-- only for other easings than swing or linear -->
<script type='text/javascript'>
$(document).ready(function(){
setTimeout(function() {
$('html,body').scrollTo( {top:'30%', left:'0px'}, 800, {easing:'easeInBounce'} );
}, 3000);
});
</script>
Of course you need to dl the scripts.
See http://jsfiddle.net/7bFAF/2/ for a working example
We can make it simpler by using the css property scroll-behavior
html {
scroll-behavior: smooth;
}