jquery smooth scroll to an anchor in wordpress - javascript

I'm trying to implement jquery smooth scroll to an anchor after clicking the menu item in the wordpress. I'm using this example:
http://jsfiddle.net/YtJcL/
Here is the js file:
$(".anchor_scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 5000,'swing');
});
In my wordpress page I create a section:
<section id="services"></section>
and in the wordpress custom menu put a class "anchor_scroll" to a link:
<a class="anchor_scroll" href="#services">.
After this I'm able to navigate to an anchor in the page after pressing the link, however, the jquery code seems to be not working, because there is no smooth slide effect, just jump.

Here's the code I would use for this;
$(".anchor_scroll").click(function(){
var section = $(this).attr('href');
$('html, body').animate({
scrollTop: $(section).offset().top - 15
});
});

Related

jQuery scroll to section on another page

I have a website which uses jQuery to scroll between a few sections (in page1.html). Now, I added another page to the website (page2.html).
I would like the links in the header of page2.html to link back to the corresponding section in page1.html.
In page2.html I wrote:
<li>Home</li>
This links back to page1.html#splash. But on page1, the site does not scroll to the respective section.
My JavaScript is:
$(document).ready(function(){
$('a[href=\\#]').click(function(e){
e.preventDefault();
$('nav').removeClass('visible');
$('html,body').stop().animate({scrollTop: $('.'+$(this).data('scrollto')).offset().top-65 }, 700, 'easeInOutExpo', function(){});
});
What I already tried:
I attempted to add the following code, found elsewhere, to page1.html:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
But there is no scrolling to the right section and the console put out the following error: index.html:19 Uncaught ReferenceError: $ is not defined
Frankly, I am stuck at this point due to lack of expertise in this field.
How do I manage that the site actually scrolls to the right section when coming from another page?
Once you have left the page, the JavaScript from the previous page can't control it. So, you'll need to use jQuery to handle it on the new page when it loads. Place this code on page1.html, changing the comment to the scroll command:
$(document).ready(function() {
if (window.location.href.includes('#splash')) {
let animationTime = 100;
$('html, body').animate({
scrollTop: $('.splash').offset().top
}, animationTime);
}
});
Uncaught ReferenceError: $ is not defined
gives this type of error when your page doesn't get the JQuery

Smooth Scroll blocks anchor link to other page

I am working on my portfolio website but I don't get the anchor links to work.
On the website you click on a case to view the details and after that I want to link back to the portfolio part of my website. I used anchor points to achieve this but my smooth scrolling is blocking the anchor links to another page. (I does work when I just link to the index but not when I add the anchor point & it also works when I remove the smooth scroll)
Does anyone know how I can fix this problem?
HTML:
<div class="menubalk" id="basic-menubalk">
<!-- logo -->
<a href="../index.html" class="logo-link">
<div class="logo"></div>
</a>
<ul class="menu" id="basic-menu">
<li>Terug</li>
</ul>
</div>
Javascript:
$(document).ready(function(){
"use strict";
$("a").on('click',function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
The problem is the condition in your JavaScript code. if (this.hash !== "") { will evaluate to true for every link that contains a hash, not just the ones on your current page.
Instead you could use:
if (this.attributes.href.value.substr(0, 1) === '#') {
Additionally, I would not use that jQuery script for smooth scrolling at all. There is a W3 standard that already works in some browsers (e.g. Firefox). And for the browsers that do not support it, you can use a polyfill (e.g. iamdustan/smoothscroll).

Smooth scrolling onclick of li element

I'm trying to write jQuery code which would make the page scroll to the div instead of going there immediately and to make it as simple as possible. I have added ids of desired divs to li elements.
My html code looks like this:
<li id="#slide1" class="active" onclick="javascript:location.href='#slide1'"><a href="#slide1" title="Next Section" >About</a></li>
<li id="#slide2" onclick="javascript:location.href='#slide3'">Works</li>
<li id="#slide3" onclick="javascript:location.href='#slide3'">Contact</li>
<li id="#slide4" onclick="javascript:location.href='#slide4'">belekas</li>
<li id="#slide5" onclick="javascript:location.href='#slide5'">dar vienas</li>
and I tried this jQuery code but it doesn't work. So maybe anyone could help me?
$('li').click(function(){
var target = $(this).attr('id');
$("html, body").animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
UPDATE: https://jsfiddle.net/j452hL2w/ here's is fiddle version of my navigation
I removed every onclick="javascript:location.href='#slide'" from every list item. This is not necessary because you create the clickhandlers in javascript.
I replaced your click function with this:
$('li').click(function(e) {
// Prevent default action (e.g. jumping to top of page)
e.preventDefault();
// Create a variable with the link found in the list-item
var link = $(this).children('a');
// Animate the document
$('html,body').animate({
// Gets the href from the link ('slideX') and scrolls to it on the page.
scrollTop: $(link.attr('href')).offset().top
// 'slow'(600ms) can be replaced by 'fast'(200ms) or a number in ms.
// The default is 400ms
}, 'slow');
});
Here is the updated fiddle.

Smooth scroll JS working with jQuery 1.11.1, but break with jQuery 1.12.3

This JS creates a Smooth scroll, it works with jQuery 1.11.1, but break with jQuery 1.12.3. Using this with a Wordpress site and would prefer not to load two versions of jQuery.
Can't figure out what to update to make it work again.
<!--smooth scroll to anchors-->
<script>
(function($){
var jump=function(e){
if (e){
e.preventDefault(); //prevent the "normal" behavior which would be a "hard" jump
var mytarget = $(this).attr("href"); //get the target
}else{
var mytarget = location.hash; //sets the target to the anchor part of a URL
}
$('html,body').animate( //perform animated scrolling
{
scrollTop: $(mytarget).offset().top - 100 //get top-position of target-element and set it as scroll target and move down 100px for fixed nav
}, 1000,function(){ //scrolldelay: 2 seconds
location.hash = mytarget; //attach the hash (#jumptarget) to the pageurl
});
}
$('html, body').hide()
$(document).ready(function(){
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
</script>
<!--End smooth scroll-->
jQuery 1.12.x does not like a[href^=#] without quotes around #.
It throws an unrecognized expression error.
Using quotes is recommended always.
$('a[href^="#"]').bind("click", jump);
Also there's an issue with your scrolltop in all jquery versions. $(..).offset() is null. This happens when your href is # or links to a non-existing id. You should also check that it's not an external link, and return, otherwise preventDefault will stop it from working.
See fiddle: https://jsfiddle.net/txau5yLf/

Scrolling Site Issues With Main Nav

I've built a scrolling homepage for my site that allows users to click a link in the header to scroll down to different sections of the site. I also have external links to new pages that allows users to view different projects.
For whatever reason, it works great, but as soon as I get to one of the project pages, then try to click the home page, or the work links it doesn't work properly. Without creating a second header.php,
how can I make the nav work globally.
<script>
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var $anchor = $(this);
href_arr = $anchor.attr('href').split("#");
$('html, body').stop().animate({
scrollTop: $('#'+href_arr[1]).offset().top - 0
}, 500); // it was -70
event.preventDefault();
});
});
});
</script>
My links looks like this...
Link
Work
Any thoughts on how to fix the jQuery so it works on external pages?
It sounds like #home and #work don't exist on your product pages, correct? If that's the case then calling event.preventDefault() will actually prevent the browser from going back to your home page. Try checking if the element exists before preventing the default behavior. If the element doesn't exist, the browser will visit the link normally. This is one way of doing it.
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var hash = '#' + $(this).attr('href').split('#')[1];
// check if the element exists on your page
if ($(hash).length) {
// if so, scroll to it and prevent the default behavior
$('html, body').stop().animate({
scrollTop: $(hash).offset().top - 0
}, 500);
event.preventDefault();
}
});
});

Categories

Resources