Develop Reference

Getting window.scrollTo(0, 0); to work

I know that this problem got probably asked and solved a thousand times, yet I need advice on my specific case.
I've set several anchors on my website and I'm using jquery to smoothly scroll between them. I've been using a #top anchor to scroll to the top of the page and it works. The problem is, however, that if I let the button scroll to #top it won't scroll to the absolute top of the page (since I can't set the anchor high enough on the webpage).
I tried to get it work with the window.scrollTo(0, 0); command, but I don't know how to get it to work while still having the possibility to scroll to anchors.
I used the following jQuery for the anchor-scrolling:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
With this HTML:
<a href="#top">
<img alt="" heigth="60" onmouseout="this.src='http://i.imgur.com/0JvWWER.png'" onmouseover="this.src='http://i.imgur.com/Ow7CVn0.png'" src="http://i.imgur.com/0JvWWER.png" width="60" />
</a>
Now, how do I get the window.scrollTo(0,0); to work and how do I implement it in the html body?
Thanks in advance.

As somethinghere says, do a small change here:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = $(this).attr("href");
$('html, body').stop().animate({
// Change here...
'scrollTop': ((target === '#top') ? 0 : $(target).offset().top)
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

Smooth Scrolling with Dropdown Menu to Anchor Tags

<select>
<option value="#anchor">Anchor</option>
</select>
<a id="anchor">Anchor</a>
I'm trying to get it to scroll smoothly, but it hasn't worked so far. The workable tutorials I found online were with regular vertical menus, not a dropdown. Does anyone know how to get this working? I've been using this:
<script>
$(document).ready(function(){
$('option[value^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () {
window.location.hash = target;
});
});
});
</script>

seems you need to scroll to anchor when you change the select value so
1st: change you selector to select and use change event for it
2nd: get selected value by using $(this).val();
<script>
$(document).ready(function(){
$('select').on('change',function (e) {
e.preventDefault(); // no need to use this line
var target = $(this).val();
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () { // swing here will work if you include jquery-ui without that it will not make a effect
//window.location.hash = target;
});
}).change();
});
</script>
Working Demo
Note: be sure to include jquery

Bootstrap scrolling navbar issues

The website I'm working on: zarwanhashem.com
You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems
The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. i.e. The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.
How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.
Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.
scrolling js:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
js added at end of document as suggested by poster in previous question:
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})

You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.
$(document).on('click', '.page-scroll', function(event) {
var clicked = event.target; //get the clicked element
if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
$(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
$(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
}else{
$(clicked).parent().siblings().removeClass('active');
$(clicked).parent().addClass('active');
}
}
Let me know if this works for you.
EDIT after you posted your code
Try replacing your function with this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
if($($anchor).closest('ul').hasClass('dropdown-menu')){
$($anchor).closest('ul').parent().siblings().removeClass('active');
$($anchor).closest('ul').parent().addClass('active');
}else{
$($anchor).parent().siblings().removeClass('active');
$($anchor).parent().addClass('active');
}
event.preventDefault();
});
});

here is a work around this problem.
just change the contents of your scrolling-nav.js to the following:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo', function(){
$('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
$($anchor).parent('li').addClass('active');
});
event.preventDefault();
});
});

Best way to smooth scrolling to an internal link

I've searched and see lots of examples about this subject but I couldn't best way for me.
I'm just a bit familiar with JS and jQuery and I want to ask about smooth scrolling.
<a name="urunler"></a>
<ul>
<li>Plastik Panjur</li>
<li>Alüminyum (İthal / Yalıtımlı) Panjur</li>
<li>Otomatik Panjur</li>
</ul>
I've a navigation like this. This scrolls instatly. But I want to do it slowly. Which is the shortest & easiest way for this? I'm more familiar to JS and I don't want to download and use JS plugins.
I need to know full syntax with a click method for my links (they all have same class)
Should I remove href park from links?
Waiting for your help & still searching
EDIT!!!: In this situation, I need only one class. Is it possible to give this property for multiple classes?
function scrollToElement (selector) {
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});
I've got ('click', 'a.uruna', function (), how can I insert another class here or should I just write:
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});
$(document).on('click', 'a.new', function () {
scrollToElement($(this).attr('href'));
});

It can also be done in pure CSS using the following in your Style Sheet.
html{
scroll-behavior: smooth
}

HTML:
<ul>
<li>Plastik Panjur</li>
[...]
</ul>
JS:
function scrollToElement (selector) {
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});
or
function scrollToElement (obj) {
$('html, body').animate({
scrollTop: obj.offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this));
});

I noticed that with JohnJohnGa's answer you get a "flicker" (at least for Google Chrome) where the page immediately pops to the anchor href position and back again before it scrolls there smoothly. This might not be noticeable with a fast computer, but it was definitely noticeable on the one I was working on. To get around this, I did the following:
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
window.history.pushState(null, null, $($anchor.attr('href')).selector);
});
Note, this prevents the default event from firing and then uses window.history.pushState to mimic it. For old browsers that don't support pushState it will scroll to the correct location, but it just won't update the address location.

Living demo: http://jsfiddle.net/wVEAy/2/
Note that for this case you would need to have an element with the same id as the one specified in the href tag of your link:
function scrollToElement (selector) {
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 2000);
};
$(document).on('click', 'a.uruna', function () {
scrollToElement($(this).attr('href'));
});

2 Javascripts not working with each other... (smooth scrolling & fade body)

Dear stackoverflowers,
I have two javascript snippets that don't appear to be working properly together.
The first one is there to fade out the body on an click event in the navigation, then redirect to a different page. But this appears to be working only after I clicked a link that triggers 'JavaScript-2'.
Here's the code for the first one:
// JavaScript-1
<script type="text/javascript">
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
</script>
'JavaScript-2' is the second one, that works together with 'jquery.easing.1.3.js' and produces nice smooth scrolling to an anchor. The scrolling always works fine and it fires in all situations.
I don't know why, but it looks like, that the smooth scrolling javascript causes the other javascript to fail.
I'm really looking forward to an answer to this little mystery.
Here's the code for the second one:
// JavaScript-2
<script type="text/javascript">
$(function() {
$('ul.navscroll a, #test a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>

Try to update your Javascript-1 code like this:
// JavaScript-1
<script type="text/javascript">
$(function() { // this fires the jQuery after load
var linkLocation = false; // define the linkLocation var
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
There are 2 main things corrected here:
$(function() {...}); will fire the jQuery-Events after the DOM is completely loaded
var linkLocation must be defined before you access on them in the redirectPage()-Method
For removing the error in Javascript-2 (where it breaks the Javascript) update them like this:
// JavaScript-2
<script type="text/javascript">
$(function() {
$('ul.navscroll a, #test a').bind('click',function(event){
target = $(this).attr('href'); // find the top of the target
offset = $(target).offset(); // this returns an object {top: y,left: x}
$('html, body').stop().animate({
scrollTop: offset.top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>
Now if you click on a link with href='#test' you will scroll to the element with the ID test for example your <footer id='test'>.