We Keep Coding

jQuery scrollTop animation weird and uncontrollable easing

I'm trying to use jQuery scrollTop animation to scroll to a specific target. But for some reason, no matter what easing i use, it starts very slow and then speeds up. It just looks very odd and ugly.
Additionally, it stops the id "Beauty-target" like planned when it is on top of the screen, but stops the "Fashion-target" , "Artists-target" and "Actors-target" when they are on the bottom of the screen.
To scroll you need to click the "Beauty", "Fashion", "Artists" or "Actors" svg under der "Preise" banner. I used Wordpress and the twenty-tweny theme. The problem occurs on the following website: https:anna-samlidou.com/example
To scroll, I use the same function i use all the time:
jQuery(document).ready(function(){
jQuery('a[href^="#"]').on('click',function (e) {
e.preventDefault();
console.log("scroll function started");
var target = this.hash;
var $target = jQuery(target);
jQuery('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () {
console.log("scroll function finished");
window.location.hash = target;
});
});
});
After some investigation i found out that when i remove the
<?php wp_head(); ?>
from the header.php file, the scrolling works as intended. Also the Website looks very broke.
So i used
<?php wp_deregister_script('jquery'); ?>
to remove just the jQuery. Which didn't have the same effect, the scrolling was still buggy.
I also installed the Plug In "Remove jQuery Migrate", which didn't help as well.
So which part of the wp_head() function causes this issue? Or how else can i fix this scrolling-issue?
Best regards and thanks a lot in advance,
AlphaLeviathan
HOW TO FIX: Thank you #SaschaM78
To fix the problem of the odd animation, i added jQuery with noConflict() like this:
<?php wp_head(); ?>
<script type="text/javascript" src="https://anna-samlidou.com/wp-content/uploads/jquery/jquery-3.5.1.min.js"></script>
<script>
var j = jQuery.noConflict();
j(document).ready(function(){
j('a[href^="#"]').on('click',function (e) {
e.preventDefault();
console.log("scroll function started");
var target = this.hash;
var $target = j(target);
j('html, body').animate({
'scrollTop': $target.offset().top
}, 1000, 'easeInOutQuad', function () {
console.log("scroll function finished");
window.location.hash = target;
});
});
});
</script>
In Safari and Firefox this worked fine, but to make it work in Google Chrome i had to unset the scroll-behavior of the html, because it conflicted with the animation.
html{scroll-behavior:unset;}
The Problem of scrolling to the wrong position was caused by not properly clearing float and with this, messing up the structure. Adding the following html code after every section solved the problem:
<br style="clear:both;>
All Credits go to #SaschaM78

I would recommend to add your JQuery 3.5.1 version with var j = jQuery.noConflict(); and calling j('a[href^="#"]').on('click', ...); instead. The Wordpress JQuery version is really old (1.12) and this will definitely cause incompatibilities and issues when mixed.
The issue with the scrolling to the wrong position is caused by not properly clearing floated elements in your <div class="preise-kategorien-abschnitt">...</div> containers. The first element has no floated elements in the DOM in front of it and its position is therefor calculated correctly. All headings following this one will have an incorrect position due to the float:left; on the <div class="preise-kategorien-abschnitt-preise-karte ...">...</div> which are not cleared.
A cleared block would look like this (without showing the inner contains of the three columns:
<div class="preise-kategorien-abschnitt">
<h2 class="preise-kategorien-abschnitt-titel" id="Actors-Target">Actors Shootings</h2>
<div class="preise-kategorien-abschnitt-preise-container">
<div class="preise-kategorien-abschnitt-preise-karte preis-karte-links">...</div>
<div class="preise-kategorien-abschnitt-preise-karte preis-karte-mitte">...</div>
<div class="preise-kategorien-abschnitt-preise-karte preis-karte-rechts">...</div>
</div>
<br style="clear:both;>
</div>

Hide hash from URL when page jump

I have a link on my menu that targets to an anchor on another page.
<a href="http://www.mylink.com.br/mylink/#anchor">
And I want to hide the #anchor from URL.
I've tried another solution, look:
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/";
});
and then, I need to activate a script to scroll to the div after the page loads:
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#divtoscroll").offset().top }, 2500);
});
but I don't know how to attach that event to the previous. The way it is, everytime the page loads, it scrolls to the div.
Any help?
I did it!
I added "contato" on the final of the URL to differentiate it from the other links.
$('#menu #mylink2').click(function() {
document.location.href = "www.mysite.com/mysite/contato";
});
And used it to recognize the URL and activate the document ready function.
var url = "www.mysite.com/mysite/contato";
if (location.href==url) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 2500);
});
}
else {
}
Works perfectly! Thanks for the help.

As far as I am aware it is not possible to do this, as it is what tells the browser which section of the page to jump to.
You may be able to do this using the amount of pixels and javascript, but it would not work for all cases.
Example:
window.scrollBy(0, 500);
You could use jQuery to scroll to a specific element ID on a page, but this would require a trigger on that page, such as a click, or even page load. Example below uses click.
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2500);
});

Fade effect with .hide() .show() in JQuery

I found a nice method to split large post, on blogger, into multiple pages here: http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/
I'm trying to add a fade effect when switching pages, but i don't know how to do this, i have no experience when it comes to jquery...
I managed so far to make the page scroll back to the top, and added some animations using time values, but it's not looking quite right.
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').show(2000);
jQuery('.content2').hide(1000);
jQuery('.content3').hide(1000);
jQuery('.content4').hide(1000);
jQuery('.content5').hide(1000);
So basically what i want is the current "page" to fade out and the next "page" to fade in...

Use below code
below javascript will add effect fadeIn-fadeOut on page while switching the pages.
<script type="text/javascript">
$(document).ready(function() {
$("body").fadeIn(800);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(400, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Put above code into <head> tag in your Html page

Add this code
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
jQuery('.content1').fadeIn(2000);
jQuery('.content2').fadeOut(1000);
jQuery('.content3').fadeOut(1000);
jQuery('.content4').fadeOut(1000);
jQuery('.content5').fadeOut(1000);

HTML Anchor Points - Wrong Position

This problem has been driving me insane for the last couple of hours.
I have a one-page website design. The anchor links work perfectly fine on the page itself.
But I have a second page that will act as the Blog section.
When I try to use the anchors from here to link back to the sections on the index page, they do not position correctly.
Please see main page:
www.redcedarstudios.ca/themes/Haze/index.html
and then try to click the nav links back from the blog page:
http://www.redcedarstudios.ca/themes/Haze/post.html
The positioning is completely out of whack.
Any help or ideas is greatly appreciated.
Thanks
John

So I found a fix.
I added a $(window).load function that will read the hash tag from the url and scroll to onloading:
$(window).load(function() {
var hash = window.location.hash;
$(document).scrollTop( $(hash).offset().top );
});

If you can't get the above to work try this:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>
It will actually animate to the correct div if it didn't land on it how it should because of assets that needed to load. If you want to remove the animation, I couldn't get the above code to work by itself, but I used my example here combined with the above example:
<script>
$(window).load(function() {
var hash = window.location.hash;
console.log(hash);
$(document).scrollTop( $(hash).offset().top );
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
console.log("page loaded");
});
</script>

Tweak smooth scrolling code

I am trying to learn jQuery and I'm having a mental blank at the moment. The following code scrolls my page to the top with a smooth transition, but I would like this smooth transition to work for all anchor/ID links on my site (it's only a one pager).
$(document).ready(function() {
$('a[href="#the-top"]').click(function (e) {
$("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
return false;
});
});
How can I change my code to achieve this?

jQuery(function($) {
$('a[href^=#]').bind('click', function (evt) {
var $what = $('#' + $(this).attr('href').split('#')[1]);
$('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
evt.preventDefault();
});
});
Changes suggested in this code:
Change global $ object to jQuery
Just jQuery(fn) as document.ready(fn)
Closure: use jQuery as $ inside that function
Prevent default event from anchor instead of return false (source: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
Use of $what asking for the #something part of anchor href, in order to prevent misbehaviors in IE (because if you have href="#some" sometimes it become href="http://yoursite.com/yourcurrentpage/#some instead)
All of these are kind of optional. You get the idea. Feel free to change.
DEMO AT: http://jsfiddle.net/Nm3cT/

Take a look at Chris Coyier's smooth Scrolling script. It does exactly that and needs no further configuration. Plus, it updates the address on the browser.