I've researched for the past 2 hours and cannot get this to work.
I am loading content via ajax and $(this).data is not working for me at all. If I change this to the actual class, then the content does load, however this is a portfolio so every button has a different url to load.
HTML:
<a class="button" href="#project-full" data-work-item="portfolio-open.html">View Project</a>
JS:
var loadUrl = $(this).data('work-item');
$(".button").click(function(){
$("#project-full").html(ajax_load).load(loadUrl);
$("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});
In theory, shouldn't the variable loadUrl grab the "portfolio-open.html" and pass it over to the loadUrl below? I am sure that I am missing something important, but from all the sources I've read this should work..
You need to put the loadUrl definition inside the click event handler, because $(this) should refer to the anchor element you've clicked:
$(".button").click(function(e) {
e.preventDefault(); // stop the default anchor action
var loadUrl = $(this).data('work-item');
$("#project-full").html(ajax_load).load(loadUrl);
$("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});
Don't forget to prevent the default anchor action (redirecting).
Here is what your code should be:
$(".button").click(function(e){
e.preventDefault();
var loadUrl = $(this).data('work-item');
$(this.href).load(loadUrl);
//$("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});
Related
So, this script is on my footer.php, and when button is pressed it redirects to homepage instead of top.
$(document).ready(function() {
$("#arriba").click(function() {
return $("html, body").animate({
scrollTop: 0
}, 1250), !1
})
});
UPDATE:
Thanks so much all, I found the solution, the code above was inserted into a php instance, I created a new javascript instance out of the php and it's working fine all the codes presented here!
You need to use preventDEfault to stop behavior of your button or anchor tag:
$(document).ready(function() {
$("#arriba").click(function(e) {
e.preventDefault()
$("html, body").animate({
scrollTop: 0
}, 1250);
})
});
EDIT:
try also this:
$(document).ready(function() {
$("#arriba").click(function(e) {
e.preventDefault()
window.scrollTo(0, 0);
})
});
i have this code to animate my page with anchors
$('a[href*=#]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
And this other code to make a delay when the link is presed
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
So when i have a link with demo the first code runs perfeclty but when i add the delay like this <a onclick="delay ('#contentexpand-1')">demo</a> the first code doesn't work just jump to the anchor.
Please help me! thanks in advance :)
The problem is that your animation is attached to <a> tags. That does not get triggered when you simply set the window location. The solution is to trigger the animate both ways:
// Smoothly scroll to a tag defined by <a name="anchorName">
function scrollTo (anchorName) {
$('html, body').animate( {
scrollTop: $( "a[name=" + anchorName + "]" ).offset().top
}, 500);
}
// Make all # anchors scroll smoothly to their targets
$(document).ready(function(){
$('a[href*=#]').click(function() {
var anchorName = $(this).attr('href').substr(1); // strip off #
scrollTo(anchorName);
return false;
});
});
// Scroll to an anchor after half a second
function delay (anchorName) {
setTimeout( function() { scrollTo(anchorName); }, 500 );
}
I am not convinced that your code for finding the offset was right so I adjusted it a bit to make it clearer.
The tag you want to scroll to is defined like this:
<a name="demo">demo</a>
Then you can choose either behaviour:
scroll smoothly to demo immediately
<a onclick="delay ('demo')">scroll smoothly to demo after half second delay</a>
I'am on my way to make a site for my friend who is a massage therapist.
And I have a boostrap dropboxmenu with treatment-links to the treatment.html on the index.html.
How do I create multiple links that with jQuery make it scroll down to the specific treatment on the new treatment.html when having multiple treatments?
Sorry for bad english. Trying my best.
I'am very very novice to javascript and jquery - first time actually..
I found this code, but it don't work?
<!-- Treatment scrolldown -->
$("html, body").animate({ scrollTop: $('#treatment1').offset().top }, 1000);
$("html, body").delay(2000).animate({scrollTop: $('#treatment1').offset().top }, 2000);
<!-- End Treatment scrolldown -->
Try something like the following:
<body id="body">
<ul>
<li>Treatment1 section 1</li>
<li>Treatment1 section 2</li>
<li>Treatment2</li>
</ul>
<script>
$(function () {
$(".menu-button").click(function (event) {
event.preventDefault();
var href = $(this).attr("href");
var section = $(this).data("section");
$("#body").load(href, function () {
$("html, body").animate({ scrollTop: $("#" + section).offset().top }, 1000);
});
});
});
</script>
</body>
Make sure you have jQuery included, and before the script.
first: you cant use html-comments inside js
second you need to wrap the ode by a script tag
third you have to run this in a self-executing function e.g at document ready event
fourth you need to include jquery before your script block
so sth like:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("html, body").animate({ scrollTop: $('#treatment1').offset().top }, 1000);
$("html, body").delay(2000).animate({scrollTop: $('#treatment1').offset().top }, 2000);
});
</script>
and fifth: you should definatly check the browser console which will outup the errors you have
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'));
});
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