Develop Reference

Scroll to a div after a few seconds

I am trying to smooth scroll to a div after about a minute on a page. I looked on here and found this answer but it did not help me as the person who gave the answer didn't really answer the person's question.
I'd prefer to use jQuery but I am open to JavaScript as well.
Here is what I have so far:
$(document).ready(function() {
$('body').delay(5000)
.animate({
'scrollTop': $('#usp').offset().top
}, 5000);
});

You can use Something like this which is quite easy.
Just Create a function with some name and call it after few seconds.
$(document).ready(function() {
function scrolltodiv(){
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
}
window.setTimeout( scrolltodiv, 5000 );
});

I hope this helps:
( function($){
setTimeout( function() {
$('html, body').animate({
scrollTop: $("#elementID").offset().top
// you can use $(".elementClass") but as ID should be unique, it would be better to use an element ID instead of classes
}, 2000);
// 2000 ms is the animation duration
}, 5000)
// it scrolls to #elementID after 5000 ms = 5 secs
} )(jQuery);

$(function(){
setTimeout(function(){
animate("#idorclass" ,2000)
}, 5000)
})
const animate = (idorclass, animval)=>{
$('html, body').animate({
scrollTop: $(idorclass).offset().top
}, animval);
}
also dynamic function that you can reuse

Javascript array click

I'm trying to avoid having the same lines of Javascript for the same purpose.
I have 3 sections:
<div class="specs"></div>
<div class="description"></div>
<div class="comments"></div>
And these 3 links:
Produkt beskrivelse
Produkt specs
</i>Kommentarer
And this javascript which, on click scrolls to the section
$(".facebook").on('click', function () {
$('html, body').animate({
scrollTop: $(".comments").offset().top - 200
}, 1000);
});
$(".readMore.desc").on('click', function () {
$('html, body').animate({
scrollTop: $(".description").offset().top - 200
}, 1000);
});
$(".readMore.spec").on('click', function () {
$('html, body').animate({
scrollTop: $(".specs").offset().top - 200
}, 1000);
});
These 3 pieces of javascript code is annoying because it does the exact same thing.
A live example can be seen here a live example. You'll see the 3 buttons on the right of the product image.
I don't know if a solution could be to add an array of some sort?

One way of handling this is giving each link a data- property that describes where the link should scroll to. You can use .data() to access these properties.
$(".readMore").on('click', function() {
// Get the selector of where to scroll to
var selector = $(this).data('selector');
$('html, body').animate({
scrollTop: $(selector).offset().top - 200
}, 1000);
});
html, body {
height: 100%;
}
div {
height: 100%;
margin-top: 20px;
border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Produkt beskrivelse
Produkt specs
Kommentarer
<div class="specs">
Specs
</div>
<div class="description">
Description
</div>
<div class="comments">
Comments
</div>

Common classes (which you have) and data attributes will save you here.
Produkt beskrivelse
Produkt specs
</i>Kommentarer
And now, one handler to rule them all:
$(".readMore").on('click', function () {
var dest = $(this).data("dest");
$('html, body').animate({
scrollTop: $(dest).offset().top - 200
}, 1000);
});

//extraced the common parts
function scrollToTop ( elementSelector ) {
$('html, body').animate({
scrollTop: $(elementSelector).offset().top - 200
}, 1000);
}
$(".facebook").on('click', function () {
scrollToTop('.comments');
});
$(".readMore.desc").on('click', function () {
scrollToTop('.description');
});
$(".readMore.spec").on('click', function () {
scrollToTop('.specs');
});

Use a helper function instead of copy-pasting your code
function foo(target, element) {
target.on('click', function () {
$('html, body').animate({
scrollTop: element.offset().top - 200
}, 1000);
});
}
foo($(".facebook"), $(".comments"));
foo($(".readMore.desc"), $(".description"));
foo($(".readMore.spec"), $(".specs"));

Probably better you just read the class on the object, split it to get the value you want. As such:
$('.readMore').on('click', function() {
var classes = $(this).attr('class');
var cursor = class.split(' ')[1];
if(cursor == 'facebook') {
...
}else if(cursor == 'desc') {
...
} else if(cursor == 'spec') {
...
}
});

First you'll need to map which dom is effecting which. you could have solved this by using some kind of class name convention. I'll assume you can't decide on the class names. So let's create a map/object/hash
var map = {
spec: "specs",
desc: "description",
facebook: "comments,
}
Now let's just iterate the map and add the functionality
Object.keys(map).forEach(function(key) {
var value = map[key];
$(".readMore." + key).on('click', function () {
$('html, body').animate({
scrollTop: $("." + value).offset().top - 200
}, 1000);
});
})
And now you are a happy coder.

If you've learned closures, I prefer those to make re-usable events more readable...
I have a jsFiddle for this here
// use a closure to make your event's callback,
// with the target as a parameter
function makeClickFn(target) {
return function() {
$('html, body').animate({
scrollTop: $(target).offset().top - 200
}, 1000);
};
}
var clickFn;
// facebook comments
clickFn = makeClickFn('.comments');
$(".facebook").on('click', clickFn);
// readmore description
clickFn = makeClickFn('.description');
$(".readMore.desc").on('click', clickFn);
// readmore specs
clickFn = makeClickFn('.specs');
$(".readMore.spec").on('click', clickFn);

jQuery - Create a function and call it

How can I create a function in jQuery and call it?
This doesn't seems to be correct:
var scrollLink = function() {
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top-20
}, 300);
};
$('.js-ask').click(function(e) {
e.preventDefault();
$('[href="' + this.dataset.target + '"]').tab('show');
reportReadMessages();
});
$(".js-scroll").click(function(e, scrollLink) {
e.preventDefault();
scrollLink();
});

You aren't passing what is this in the scrollLink(). It is a function with empty parameters, when it doesn't understand what this is. So please change it to:
$('.js-ask').click(function(e) {
e.preventDefault();
$('[href="' + this.dataset.target + '"]').tab('show');
reportReadMessages();
});
$(".js-scroll").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top-20
}, 300);
});
You are not passing the scrollLink in the right way. That's why it didn't work.
Or you can extend the function this way:
$.fn.scrollLink = function() {
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top-20
}, 300);
};
And you can call on the elements like:
$(this).scrollLink();
$(selector).scrollLink();
See How to add a function to jQuery? for more information.

waypoint js click to next div

Working on a function with waypoint.js that takes the current div in the viewport and finds the next div when clicking a button.
Currently I’m getting a undefined value for the ‘next’. Not sure what could be wrong I guess the value can’t move from the waypoint function to the click function. Any help would be lovely.
$('.wrap').waypoint(function() {
var next = $(this).next();
$(".button").click(function() {
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
});

i suggest you to chain it instead of doing this in the callback:
$('.wrap').waypoint().addBack(this).find(".button").click(function() {
var next = $(this).closest('.wrap').next();
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
or could be something like this:
$('.wrap').waypoint().done(function(){
$(this).find(".button").click(function() {
var next = $(this).closest('.wrap').next();
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
});

jQuery run onclick function only once

How can I execute this function only one time?
I tried .one but it doesn't work
$('a.inspire-tag').on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
});

If you want to do is just click once to enable
Try this:
$('a.inspire-tag').on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
$('a.inspire-tag').off('click');
});

$('a.inspire-tag').on('click',doThis);
function doThis () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
//you can off all on callback function
$('a.inspire-tag').off('click',doThis);
}

Use .off(), with name spaced event names
$('a.inspire-tag').on('click.myevent', function () {
if (...)
// remove current event handler
$(this).off('click.myevent')
});

var oneTime = true;
$('a.inspire-tag').on('click',function () {
if(oneTime) {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
oneTime = false;
}
});

var inspiretag = $('a.inspire-tag');
inspiretag.on('click',function () {
$('html, body').animate({
scrollTop: $(".button-inspire").offset().top
}, 400);
inspiretag.off('click');
});
http://api.jquery.com/off/