I'm trying to script a backtotop button which will be situated sitewide in the footer, for some reason it's returning "Cannot read property 'top' of undefined".
Any help would be great, cheers.
JQUERY
$( '#backtotop' ).on('click', function(event) {
event.preventDefault();
var target = '#'+$(this).data('target')
$('html, body').animate({
scrollTop: $(target).offset().top
}, 1000);
});
HTML
<span id="backtotop"><img id="upwardarrow" src="/img/upwardarrow.png"></span>
Try:
var target = '#'+$(this).parent().data('target');
this in your code refers to the span which does not have data-target, you have to access it from the parent <a>
Or modify your html like this:
<span><img id="upwardarrow" src="/img/upwardarrow.png"></span>
Move the id="backtotop" to the <a> tag and don't need to change the js.
you forgot to close off the line with ;
Also, I changed the target definition.
$( '#backtotop' ).on('click', function(event) {
event.preventDefault();
var target = $(this).parents().attr("href");
alert(target);
$('html, body').animate({
scrollTop: $(target).offset().top;
}, 1000);
});
Tested and working.
Try the following code:
$( "#target" ).click(function() {
$(document).scrollTop(0);
});
Related
<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
I have two divs with anchors inside (one with a class of 'renter', the other with a class of 'owner'). When clicked, the page should scroll to elements '#pageInclude119' and '#pageBContent120' respectively. However, I want them to go to a separate page if Javascript isn't work, so that's why they're linked. Here's the HTML:
<div class="button renter">i’m a renter</div>
<div class="button owner">I’m an owner/investor</div>
and here's my Javascript (the preventDefault is to keep the link from going to another page, while the animate is supposed to scroll to an element in the same page):
$( document ).ready(
$('.renter a').on('click', function(){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#pageInclude119").offset().top
}, 1000);
});
$('.owner a').on('click', function(){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#pageBContent120").offset().top
}, 1000);
});
);
For some reason, this script returns this error, and doesn't work:
"SyntaxError: missing ) after argument list"
What's going wrong?
Instead of
$(
// Code here
);
Use this
$(function() {
// Code here
});
See jQuery docs.
Few errors, missing function() {} and event parameter in the on click statements:
$( document ).ready(function() {
$('.renter a').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#pageInclude119").offset().top
}, 1000);
});
$('.owner a').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#pageBContent120").offset().top
}, 1000);
});
});
In the $( document ).ready you forgot to add a function:
$( document ).ready( function() {
...
});
You got the syntax a bit wrong. The outermost block should be:
$( document ).ready(function() {
//.....
//......
});
or you can use the shorthand:
$(function() {
//.....
//......
});
Here is the updated/working code.
$( document ).ready(function() {
$('.renter a').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#pageInclude119").offset().top
}, 1000);
});
$('.owner a').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $("#pageBContent120").offset().top
}, 1000);
});
});
I'm using the grayscale bootstrap template for a wordpress theme. I have my scripts enqueued, but I'm not sure how to fix the syntax on the original javascript. The functionality works like this: click on a link and it slides you down to the id attribute.
Here is the original code:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
And I replace the $ with jQuery because of .NoConflict
jQuery(function() {
jQuery('.page-scroll a').bind('click', function(event) {
var $anchor = jQuery(this);
jQuery('html, body').stop().animate({
scrollTop: jQuery($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Then I get this error:
TypeError: 'undefined' is not a function (evaluating 'x.easing[this.easing] (e,this.options.duration*e,0,1,this.options.duration)')
The $anchor is local, so I'm sure it doesn't matter. Infact I've replced it also, but I get the same result. Any suggestions? Does the problem lie in this line var anchor = jQuery(this);?
It turns out I was loading the wrong library. I needed to load the easing library instead of the jQuery UI library.
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
I have made a simple webpage with lots of division. So to navigate direct to a division I have put a anchor on top like this :
First<br/>
Second<br/>
Third
And for smooth scrolling I have used javascript:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
Now I want to add effect to the selected division. So when user click on an anchor, the page smoothly scrolls to the division and the selected division is highlighted for a second. Just like when we get any news in Stack Overflow inbox, and we click on it; the page lodes and the news item is highlighted for a short duration.
I want to do that thing to my page. Cause I'm having more then 18 divisions and they are all same.So it is necessary to differentiate the selected division.
Here is the example Fiddle : Fiddle For the Code
Any help would be appreciated. Thanks in advance.
In Your code $('html, body') returns 2 elements so animation will fire twice. If you include jquery.ui You will be able to do this:
$('a').click(function(){
var selector = $(this).attr('href');
$('html').animate({
scrollTop: $(selector).offset().top
}, 500,'',function(){
$(selector).effect("highlight", {}, 1000);
});
return false;
});
JsFiddle
This use opacity like example:
$('a').click(function(){
var el = $(this).attr('href');
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500, function(){
$(el).animate({'opacity':0.5},200, function(){ $(el).animate({'opacity':1}, 200)} );
});
return false;
});