Best way to smooth scrolling to an internal link - javascript

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'));
});

Related

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;
});
});
});

Using jQuery's animate without using slidetoggle

I have this code
$(document).ready(function () {
$('.click_to_hide').click(function () {
var visible = $('.hide_on_click').is(":visible");
$('.hide_on_click').slideToggle(500);
if (!visible) {
$('html, body').animate({
scrollTop: $('.hide_on_click').offset().top
}, 500);
}
});
});
I am trying to change it to use only animate, but nothing I tried worked so far.
How can I revise the code to only use animate instead of the way it is now?
Fiddle Demo: http://fiddle.jshell.net/YFR2e/3/

jQuery scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.
Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});
You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO
No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

Prevent an auto reload caused by jquery scroll function

I'm using a simple piece of code inorder to have internal links scrolls to specific divs. It works they way I intended but it also reloads the page. The scroll works perfect, just that I need it to not reload the page. Also if this matters, Im using this inside a Wordpress theme I created.
HTML:
This may sound crazy, So hire me maybe?
<div id="hiremenow"></div>
SCRIPT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(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;
void(0);
});
});
});
Return a false value.
$('a[href^="#"]').on('click',function (e) {
//whatever...
return false;
});
This means "the click event has been handled, do not perform the standard action".

jquery scrolling won't scroll from exact location

I'm using the following jquery to make my links scroll to the next div. However, I've run into a problem. From the top of the page the script works fine. As soon as I click a link from another div (another link further down the page) the script only scrolls so far either up or down but not to the next specified div. How can I make the script scroll fully from the current location of where the link is located?
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
You have a error here:
scrollTop: $($anchor.attr('href')).offset().top
//------^^^^^^^---------------------------------this itself a selector
change to this and try with:
scrollTop: $anchor.attr('href').offset().top
or this one too:
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
CHECKOUT IN FIDDLE
You're not calling the correct spot...
this should do the trick... Set the anchor point first.
$(function() {
$('#nav a').bind('click',function(event){
var $anchor = $(this).attr('href');
$('html, body, #container, .main').stop().animate({
scrollTop: $($anchor).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
ok, so I've made you a JSFiddle, the js-code I rewrote to the code below, but you can have a have a look at the full thing here: http://jsfiddle.net/re7Xc/
$(function() {
$('a.scrolltonext').click(function(event){
event.preventDefault();
var parentblock = $(this).parent();
var nextblock = parentblock.next();
//nextblock.css('background-color','#00f');
if(nextblock.size()>0) {
$('html, body').stop().animate({
'scrollTop': nextblock.offset().top
}, 800);
}
});
});
the catch in this script though is that I put the links in the div itself, so it's not in a #nav somewhere. So you'd have to rewrite that part if you put the links in your #nav!
I put an if-statement in there as well, because I thought it'd be better if you check if there is a next-div first, before scrolling there.
Hope it makes some sense, and let me know if it works for you!
cheers

Categories

Resources