I have index.php which has different sections like top,service,aboutus andcontactus .I have my header.php in includes folder and I include it to each and every files separately.I added jquery for smooth scroll for sections.
Now I have gallery.php which has the same header.Now I want to call each and every section from gallery to index/section. So I changed the href="#service" to href=index.php#service.Now it works from both index and gallery pages.
Problem:
The smooth scroll on works if I call the section from index.php. When I call a section from gallery.php it just load the upper part of index.php and suddenly moves to the called section.I want it to move smoothly.How can I make it happen?
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Your code look good but you have to make footer.php and call function from footer.php so that your problem will reslove.
As i use we have to call all jquery related things from footer but its depend on your requirements so in that case you can call from footer.php
Related
I added IDs and the smooth scroll effect won't work. It doesn't even scroll up to the ID that I assign it. I tested it in a test HTML file and it worked. I thought it was because some of my responsive elements didn't have fixed heights, but when I gave them fixed heights, it still did not work.
I tried to copy and paste my code. However, it said I have formatting problems no matter what I did. So I created a pastebin link: https://pastebin.com/raw/dfQS9RUA
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
alert("SCROLL CODE RUNNING");
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
Click Me to Smooth Scroll to Section 1 Above
I found that I get this error in the console:
index.html:30 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (index.html:30)
at HTMLAnchorElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLAnchorElement.v.handle (jquery-3.4.1.slim.min.js:2)
This implies that I do not have the right version of JQuery installed, but when I make the CDN the uncompressed version or the slim version, it still does not work.
This is the CDN of JQuery I am using:
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
https://codepen.io/tmoses/pen/zYvzZmo
https://code.jquery.com/jquery-3.4.1.min.js
Change the above in your bootstrap scripts, and remove the other. For some reason the slim version didn't load the animate function, but it works with just the minified version. It also appears the "integrity" attribute was causing it not to load properly. Try not to combine several versions of jQuery in one document.
WARNING: I'm new to JavaScript.
I am developing a site for a family member and I've stumbled upon a problem. I am using Bootstrap 4 for the site, and therefor their navbar framework. The navbar is fixed to the top, and uses ScrollSpy to highlight the active section.
I am using this code from W3 to have my Nav links slowly scroll down the page to a section.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
No luck. My nav links nolonger work, and I get these nasty console errors
master.js:15 Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement.<anonymous> (master.js:15)
at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)
I know what you're thinking, master.js is sourced before jQuery. Nope!
I would appreciate any help I can get on this.
See the answer here: jquery : $().animate() is not a function
You appear to be using the slim build of jQuery 3.2.1, which doesn't
include most of the library. Instead, you should be using the full
version.
https://code.jquery.com/jquery-3.2.1.js
I have created a function that uses scrolling sliding effect when I click on a link it slides down and takes to that div but i also placed another library for sliding navigation bar when we click on menu it slides form right to left and navigation menu opens but the problem is that both are not working when both are active if i remove the slide menu library the page sliding effect is working fine but when I add slide menu library it stops how can I make both to run ??
//main.js which is using sliding page effect pparallax we say i beleive them
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Here is my footer where I have placed the libraries
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/BootSideMenu.js"></script>//if this is removed everything is working fine
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function(){
$('#navigation').BootSideMenu({side:"right"});
});
</script>
Please can anyone help me out my english is a bit bad so sorry for incorrect tenses :)
Thank You
Got an issue with a navbar I'm creating for a WordPress site. Some of the links are meant to scroll down to different places on the homepage and some are outside links to other places on the site. Something like this:
<div class="main-navigation">
<ul>
<li class="link1">Link 1
<li class="link2">Link 2
</ul>
</div>
Basic stuff.
So if I add the following Javascript in the footer....
jQuery(document).ready(function() {
jQuery('.main-navigation a' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
Link 2 will scroll down but since Link 1 isn't supposed to scroll, if you click on it, nothing happens like it's a null link.
I thought I could change the reference to something like
jQuery('.main-navigation a.link2' ).click(function(){
So only link 2 does the scrolling, but that just makes it jump to the page like an old anchor tag trick in the 1990's.
Tried a few variations of the same idea, and nothing clicked. Anyone know what the right code would be to target just the buttons that need to have the scrolling?
Building from itsgoingdown's answer. The animation is ignored because the default link event still fires. If you pass the event and also prevent the default, you'll be set. See below.
$(document).ready(function() {
$('.main-navigation a[href^="#"]' ).click(function(event) {
// Prevent default link action
event.preventDefault();
// Grab location to send to
var href = $(this).attr('href');
// Scroll the page, animated
$('html, body').animate({
scrollTop: $(href).offset().top
}, 700);
});
});
Here is a live JSFiddle to show as well.
https://jsfiddle.net/y3nutj22/5/
Thanks to the both of you. I finally figured it out and in a sense, you're both right. However, neither of your codes produced the scrollTo effect. While '.main-navigation a[href^="#"]' was partially correct, my issue....and I finally realized it this morning....was I hard coded in the URL's in WordPress' menu feature as a complete URL. So just using '#' wouldn't work. Also, since it's WP, I can't use $'s in the code, Have ot use jQuery, of course.
This is the code that did the trick.
jQuery(document).ready(function() {
jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
return false;
});
with path.to.url representing the actual URL, of course.
Thanks again!
I have seen a lot of websites where they are linking in the same page.
(demo)
The problem in this system is, when you reload the page after clicking the link (which refers you to the selected area), the page immediately scrolled to the selected area, because the click on the link leaves a #name on the URL page (even when reloading), for example:
www.example.com/#down
I have seen also websites, where they don't add #name to the URL line but you still referred to the linked area.
I guessed this has been made by jQuery or Javascript but I couldn't find (inspect element and page's source) the code (I found this system in high-tech sites, where they have a lot of js files and it was complicated to find).
My real question is: how can I link within my website, without using the hash-tag|name system?
The behaviour you describe is the intended, desired behaviour of anchors. As has been said...
Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.
You can have an event listener detect clicks on links and scroll accordingly. jQuery would be something like this:
$(document).on("click", "a[href*='#']", function(evt) {
evt.preventDefault();
var target = this.href.split("#")[1];
var elm = document.getElementById(target);
if( elm) elm.scrollIntoView(); // or replace with fancy scrollTo plugin
});
However, be aware that doing this decreases usability. From xkcd...
Working DEMO
HTML:
GO SEE THE DEMO
jQuery:
$("a").click(function(event) {
event.preventDefault();
var divId = $(this).attr('href');
$('html, body').animate({
scrollTop: $(divId).offset().top
}, 500);
});