I need jQuery animate together with scrollTop to create a smooth scroll effect to my anchor links. In my current project this is not working. All the animate - scrollTop Events are doing nothing. I load jQuery 3.1.1 in the header. In my footer main.js i use the the following javascript:
$('a[href*=#]').on('click', function(event){
console.log("ScrollTop");
$("html, body").animate({ scrollTop: 500 }, "slow");
return false;
});
I can see the ScrollTop in my Console but there is no animation. I dont know what to do i tried a lot of things. I also tested it in all the different browsers its working nowthere.
The issue is that your selector with href contains # gives a different meaning without the quotes. Once you put # in quotes, it works fine.
$('a[href*="#"]').on('click', function(){
$('html,body').animate({scrollTop: 500}, "slow");
});
Example : https://jsfiddle.net/3vy7adh7/
Or
If you want to avoid the post on any valid a tag,
$('a').on('click', function(e)
{
e.preventDefault();
if($(this).attr('href').indexOf('#') > -1)
$('html,body').animate({scrollTop: 500},"slow");
});
Example : https://jsfiddle.net/3vy7adh7/1/
This should work for you:
$('a[href^="#"]').on('click',function (e) {
var href = $(this).attr('href');
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 180
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Related
hey guys i am an absolute newbie to jquery and here is one of my first scripts , its basically suppose to add an animation basically when scrolling to a particular, section , the fiddle is here.
the scrolling code that i have in jquery is :
$('nav a[href^="#"]').on('click', function (e) {
e.preventDefault();
$('nav a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});
now i only know basic debugging in JS and so the only fault i could find in the script is that target is not defined. i got this script from an online tut and it worked perfectly over there , but i have no idea why here its not working.
i can't understand the authors intent of adding an undefined variable .
can somebody please point me out what am i doing wrong ? original Tutorial code can be found here.
TY .
Alex-z
Instead of animating html, body, you probably want to animate .content:
$('.content').animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
Fiddle
In this code:
var target = this.hash,
… this refers to the a element that was clicked, and hash refers to its URL.
So for this element:
Example-1
… this.hash would be #ex-1.
This code:
$target = $(target);
… is now equivalent to:
$target = $('#ex-1');
… which refers to the div with that id.
.content is then scrolled to that div's top position.
I have used Smooth Scroll Plugin From CSS TRICKS,
Its working great but for only 2 ancoher links and not for another one, please see the demo here,
LIVE DEMO
Its working Great for industries and Pricing, but on testimonial its just jump to the position and also the fixed nav cut off the section too.
<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 - 130 // - 130px (nav-height)
}, 900, 'swing', function () {
// Replace this with something that can be easily parsed and used by your code
window.location.hash = '3' + target;
});
});
});
</script>
Here i've made a jsfiddle,
jsfiddle.net/Thq62/
and it's working fine just added a proper id and hash to the links
I'm trying to use the animate effect on the scroll associated with hashbang links on the page.
When I use this on a regular website it works perfectly.
As soon as I try to use it on a wordpress site it doesn't animate, it just jumps to the DIV instead of scrolling.
jQ code (Tried placing it in the head, body and footer (makes no difference) :
<script type="text/javascript">
jQuery.noConflict();
jQuery(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;
});
});
});
</script>
Here are my current versions of JQuery in case there is an issue there?
jquery.js?ver=1.11.0
jquery-migrate.min.js?ver=1.2.1
Could it be the order that wordpress is enqueing the scripts?
Any ideas because I'm pulling my hair out here!
try with wrap (function($){ //your content })(jQuery);
(function($){
$(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;
});
});
});
})(jQuery);
change to this:
<script type="text/javascript">
jQuery(document).ready(function($){ // pass $ as an arg here
You need to pass $ as an argument in the ready callback and you don't need to have jQuery.noConflict(); so remove it.
Because wordpress uses jQuery instead of $ so that this wont get conflicted with other libraries which uses $ as an alias, So you can do two things
Just do as suggested above or
replace every occurance of $ with jQuery.
I've been struggling to get an Animated scroll working on this site www.nicbrwn.com/dev but the scrolling only seems to work on Firefox and I need it to work on all platforms.
The jQuery I'm using to 'scroll' is here:
<script>
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
});
});
</script>
All help would be appreciated.
You need to remove overflow: auto on the body, html in your css. That's what's stopping it.
Select both html and body elements:
$('html, body').stop().animate({});
So, I'm quite new to javascript and building a site where I'm trying to have animated scrolls on the page.
To enable animated scroll to a link I'm using this code:
jQuery(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;
});
});
})();
To scroll to the top of the page I am using this code.
//<-- scroll top -->
var $top = jQuery.noConflict();
$top("#scroll-top").hide();
// fade in #scroll-top
$top(window).scroll(function () {
if ($top(this).scrollTop() > 150) {
$top('#scroll-top').fadeIn();
} else {
$top('#scroll-top').fadeOut();
}
});
// scroll body to 0px on click
$top('#scroll-top a').click(function () {
$top('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
They both work fine independently, but not together.
Can anybody help me find out why they conflict, and how to solve the conflict?
So, this is how I fixed my issue:
I removed the conflicting code " // scroll body to 0px on click " and instead use the animated scroll to anchor link to animate both functions, with a placed on top of the page as well.
jQuery(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;
});
});
})();
I works fine, but I am missing only one feature, that the javascript recognises internal links that start with anything else than #. Right now it doesn't recognise for example this link http://julebord.bedriftsdesign.no/julebord.html#julemeny. It only works if I use this: #julemeny