Develop Reference

Scroll to anchor when expanding details/summary?

I have a very large set of stacked divs containing id anchors and embedded videos wrapped in details and summary tags. Is it possible to simultaneously expand the details and scroll to its id in a single click? If I use the script below, I can scroll to an anchor with the a tag:
/* JS */
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
/* HTML */
<div id="anchor></div>
Scroll to anchor
However, wrapping the summary or details itself in the a tag will disable this scrolling effect.
/* HTML */
<div id="anchor">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
I've tried a number of different variations, but I can't seem to get the combined effect of expand + scroll. What's the right approach for solving this issue?

Well, details tag use open attribute to expand, so you just need to add this attribute when click fired.
$('details').attr('open', true);
If you want to close it use:
$('details').attr('open', false);
In your code better use this selector:
$(target + ' details').attr('open', true);
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$(target + ' details').attr('open', true);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function() {
window.location.hash = target;
});
});
});
#divide {
height: 500px;
}
body {
padding-bottom: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<div id="divide"></div>
<div id="anchor1">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor2">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor3">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor4">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>

Javascript run after 3 seconds

I have a collapsible div in my project that once the user clicks on it and it expands, I need it the computer to scroll down so the user knows the text is there. The expansion of the div works but since it tries to expand automatically (before the div expands) and because this is the bottom of the page (prior to the Div opening) it will not scroll. So what I want to do is put in a 3 second delay in to my Javascript so it will not try to do that until the Div is open. I cannot get it to work. This is the code I currently have:
<script language="Javascript">
function scrollRefund() {
var divPosition = $('#refund').offset();
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 1);
}
</script>
<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>
<div id="refund" class="collapse">

The second argument for setTimeout is in milliseconds. Try 3000 instead of 1.
<script language="Javascript">
function scrollRefund() {
var divPosition = $('#refund').offset();
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 3000);
}
</script>
<button type="button" class="btn-link" data-toggle="collapse" data-target="#refund" onclick="javascript: scrollRefund();">Refund Policy</button>
<div id="refund" class="collapse">

Try to use
setTimeout(function(){
$('html, body').animate({ scrollTop: divPosition.top }, "slow");
}, 3000);

JQuery add class on scroll height header

I use this code to add a class on scroll. The active class works great, but the location on the page when the class is placed is not correct. We use a main header on our website with position fixed and when this header becomes sticky it is placed below our main header also fixed. The active class needs to be placed earlier on the page when scroll, because the content of the section already started, when the class is placed.
And for some reason the code conflicts with another script on the same page, how can I fix that problem? That both scripts with beside each other.
Fiddle: http://jsfiddle.net/0knrcv3z/1/
HTML:
<div style="height:57px;">
<div class="menu-header-product">
<div class="product-anchor-links-wrapper">
<nav class="product-page-nav">
<ul class="menu-header-top-product">
<li class="menu-item-header-product">Productbeschrijving</li>
<li class="menu-item-header-product">Specificaties</li>
<li class="menu-item-header-product">Reviews</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="content">
<section id="description">
<div class="box-description"></div>
</section>
<section id="additional">
<div class="box-additional"></div>
</section>
<section id="reviews">
<div class="box-reviews"></div>
</section>
</div>
What do I need to change in this code?
<script>
$(window).scroll(function(){
var sticky = $('.menu-header-product'),
scroll = $(window).scrollTop();
if (scroll >= 645) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(window).scroll(function(){
var sticky = $('.content'),
scroll = $(window).scrollTop();
if (scroll >= 645) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-130 /**just subtract the height of the fixed html part */
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('nav a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
</script>

if (scroll >= 50) sticky.addClass('sticky'); else
sticky.removeClass('sticky'); }); $(window).scroll(function(){ var
sticky = $('.content'),
scroll = $(window).scrollTop();
if (scroll >= 12) sticky.addClass('sticky'); else
sticky.removeClass('sticky'); });
adds the sticke header when scrolling over "50" and removes it wenn scrolling under 12. just edit those numbers as long as it would be good for you ;)

jquery scrollTo to work with a button

I'm having trouble getting a simple jquery code to work. I want a button to scroll the page down to another div.
The code is in here: http://jsfiddle.net/utm6d/
html:
<div class="jumbotron">
<div class="container text-center">
<h1>Scroll down!</h1>
<a type="button" id="helloclick" class="btn btn-default">scroll!</a>
</div>
</div>
<div class="container text-center" id="second">
<p> come here </p>
</div>
js:
$('#helloclick').click(function(){
$('html, body').ScrollTo("#second");
});

You need to use the scrollTop() method with an offset() of your target object.
$(function() {
$('#helloclick').click(function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $("#second").offset().top
}, 500);
});
});
EDIT: Code needed to be wrapped in $(function() {...});, to ensure #helloclick & #second are loaded before being executed.
See it working on JSFiddle

Try this:
$('#helloclick').click(function(){
$('html, body').animate({
scrollTop: $('#second').offset().top
}, 500);});
Working Demo

jQuery does not have .ScrollTo() method.
In your case, you need to use .scrollTop():
$('#helloclick').click(function(){
$('html,body').animate({ scrollTop: $('#second').offset().top });
});
Fiddle Demo

jQuery Scroll: prevent anchor text from appearing in url

So i got the jQuery scroll working just fine on my page.
But I want to change one thing.
I don't want to show the anchor text in the url. ie. #products or #contactinfo
HTML CODE:
<div>
Products
Contact info
</div>
<div id="products"></div>
<div id="contactinfo"></div>
jQuery code:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

Try this:
HTML:
<div>
<span class="link" rel="#products">Products</span>
<span class="link" rel="#contactinfo">Contact info</span>
</div>
<div style="height:800px;"></div>
<div id="products">products</div>
<div style="height:800px;"></div>
<div id="contactinfo">contact</div>
<div style="height:800px;"></div>
Script:
$(document).ready(function(){
$('.link').on('click',function (e) {
$('html, body').stop().animate({
'scrollTop': $($(this).attr('rel')).offset().top
}, 900, 'swing', function () {});
});
});
Fiddle

just add a return false; at the end of the click function.
Edit: and probalby remove this line, I mean.. it does exactly what you not want? Appearently?
window.location.hash = target;