First of all: I'm a Jquery newbie :-)
I've implemented this "smooth scroll" effect to the internal links on my website so when I use # in a href (like a href="#footer") it makes the effect:
$(document).ready(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
console.log("Denne funktion fanger #");
console.log(event);
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
And I'm using this script to fade between pages so everytime I click an external link it makes the fade effect to that given page.
$(document).ready(function() {
$("body").css("display", "none");
});
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(1000);
});
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(1000);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
But I do not want the fade effect on the internal links where I use the smooth scroll effect. How do I write an exception in the above script so it ignores the fade effect-script where I use the #?
Thank you!
You can use a not() with a "startswith".
$("a:not([href^='#'])").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
You can just fitler out the elements.
$("a").not("[href^='#']").on("click", function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
Related
I'm building a single page website which uses smooth scrolling to anchors for navigation. I'm also trying to add a 'back to the top' button but can't seem to get the animation working (clicking the button doesn't do anything). I believe it's because I'm using two scrollTop functions. Is this correct and how can I solve this?
// Smooth scrolling for page anchors
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing');
});
});
// Sticky back to top button
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.go-top').fadeIn("500");
} else {
$('.go-top').fadeOut("500");
}
});
$('.go-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
Found the solution - I had to removed the second $(document).ready(function () { line of code.
I have the following jquery function which shows / hides content depending on the div that is selected...
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
jQuery(this).addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
location.hash = selector;
});
});
http://jsfiddle.net/W4Km8/7944/
I also have the following script taken from http://1stwebmagazine.com/jquery-scroll-to-anchor-point
$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
I am trying to combine the 2 so that instead of jumping to the anchor it scrolls to it. Do I need to combine them or can they be made to work separate?
Looks like you can combine them easily enough, I've made it work with this jsfiddle: http://jsfiddle.net/9soxbhpj/
var target = jQuery(selector);
target.show()
$('html, body').stop().animate({
'scrollTop': target.offset().top-40
}, 900, 'swing', function () {
window.location.hash = selector;
});
You can add the scroll action in the same click call.
See the js:
jQuery(document).ready(function() {
jQuery('.showSingle').on('click', function () {
var _el = jQuery(this),
_target = jQuery('#div' + _el.data('target')),
_targetDiv = jQuery('.targetDiv');
_el.addClass('selected').siblings().removeClass('selected');
_targetDiv.hide();
_target.show();
// Scroll to object
$('html, body').animate({
scrollTop: _target.offset().top
}, 800);
});
});
Here is a working example.
<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
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'>.
I'm using this for my scroll transition between a top and bottom div:
<script type="text/javascript">
$('a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
location.hash = href;
});
});
</script>
But it's conflicting with how I'm using fancybox as it's using 'href', I've tried defining the 'div ids' in place and creating a shared class (eg .smooth and called in both links) but it just broke. How can I use this specifing only two divs for it to apply to?
Question spawning from - https://stackoverflow.com/questions/8547378/fancybox-with-iframe-js-conflictions-with-my-site-wont-implement
Change this:
$('#menu a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
location.hash = href;
});
});
There is no point in scrolling when 'Gallery' is clicked and opens fancybox.