Converting conventional jQuery link smooth scrolling method to vanilla javascript - javascript

I'm converting this jQuery code:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
It's very popular, and I'm sure everyone understand what it does, when clicking an anchor link with an id it smooth scrolls to it. I have used this code for many projects but I am no longer using jQuery, as it is being deprecated. Converting this to vanilla JavaScript has proven a challenge. This is what I have so far, that works:
document.addEventListener('click', function(event) {
if (event.target.matches('a[href^="#"')) {
event.preventDefault();
console.log('works fine')
}
}, false);
I am having trouble finding resources to convert .animate() and the line with scrollTop. It's a pretty tall order for someone with only beginner/intermediate JS experience. I was wondering if anyone knew how to convert this code to JavaScript, or where I could find resources about converting this. A popular solution to smooth scrolling I have found is the following code:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Using scroll-behavior: smooth, but I do not wish to use this as it is unsupported by many browsers (to my knowledge), and it does not let me customize how long it takes to smooth scroll.
Any help would be much appreciated.

Looking through the jQuery code, it uses another library (Tweening) to create the smooth scrolling effect. It wouldn't be worthwhile trying to create it in vanilla JS.
While a lot of browsers might not support scroll-behaviour, pretty much all major browsers do. A lot of older browsers are now being discontinued (especially IE).
Your best option is to continue using the code you provided yourself (or just continue using jQuery):
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});

Related

Smooth Scrolling with only vanilla JavaScript

I have always used this jQuery script for smooth scrolling:
var root = $('html, body');
$('a[href^="#"]').click(function() {
root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
return false;
});
How can I do this with vanilla JavaScript? I have tried this:
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
But it doesn't work with Safari, which is a deal breaker for me.
As you can read on the docs safari doesn't support options parameters on scrollIntoView so you'll need to find another method. I suggest taking a look at this alternative.

Twig (or Symfony?) doesn't run my jQuery script

I currently am trying to create a website using Symfony 4. The issue is that one of my pages is in need of a jQuery script to work, part of it is working but functions like these aren't called, why ?
Example of code not being called :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents(); //this is another external function that I don't
//manage to call, even when called in the
//executed part
});
});
I am sure it doesn't come from my javascript as I tested it "off-symfony".
Thanks in advance, Crikripex
Alright, so after hours trying to figure out what and where the issue is, I came to the conclusion (thanks to #fyrye) that there might be compatibility issues between jQuery and Symfony4 or Webpack Encore.
I then decided to "translate" my code from jQuery to Javascript without any library and it worked fine.
To summarize, I went from :
$(document).ready(function(){
$(".someClass").click(function (event) {
event.preventDefault();
$(".active.focused").toggleClass("active");
$(".focused").toggleClass("focused");
$(this).toggleClass("active");
$(this).toggleClass("focused");
refresh_contents();
});
});
to :
for(i=0;i<maxId;i++){
document.getElementById("contain_" + i).onclick = function(event){
event.preventDefault();
document.getElementsByClassName("focused")[0].classList.remove("active");
document.getElementsByClassName("focused")[0].classList.remove("focused");
document.getElementById(this.id).classList.add("active");
document.getElementById(this.id).classList.add("focused");
refresh_contents();
}
}
I know it doesn't look as fancy, it's not as easy to code as jQuery, but so far that's the only solution I found that actually works.
Thanks for your help everybody.

Smooth scroll to div in polymer element

I am using the Polymer 1.0 tools to build a webapp and I am having trouble starting a smooth scroll to a specific div. I have success using the polymer method this.$.div.scrollIntoView() but this just moves to the specific div without scrolling to it. I would like to use the jQuery method scrollTop() but cannot seem to figure where to fire this function and when/how I can attach this function to a paper-fab. Here is what I have so far:
<div align="center">
<paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab>
</div>
And here are my scripts at the bottom of this specific Polymer element:
<script>
Polymer({
is: 'my-view',
scrollToView: function() {
this.$.parallax.scrollIntoView(false);
}
});
</script>
<script type="text/javascript">
function goToByScroll() {
$('html, body').animate({
scrollTop: $("#section_one_cont").offset().top}, 'slow');
}
$("#fab").click(function(e) {
goToByScroll();
})
</script>
So the first 'Polymer' script does in fact work but not in an appealing way, and then if I try to only use the jQuery scripts, they don't do anything.
This is the jQuery CDN I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Any and all help is appreciated, I would really like to figure out how to use non polymer scripts within Polymer elements as that would open up a few more things I would like to achieve with this. Thanks in advance!
I was trying for several hours to find a solution for my own project (preferable one that doesn't require JQuery). Unfortunately all options come with a twist.
scrollIntoView()
With scrollIntoView it is possible to define a behavior which can be set to smooth, instant or auto.
The catch is that the scrollIntoViewOptions which are defined in the scrollIntoView are only supported by Firefox.
element.scrollIntoView({block: "end", behavior: "smooth"});
scroll-behavior
I in person would prefer this solution. As it is just a simple CSS snippet.
However, similar to the above example not all Browser support it and Chrome and Opera only do it when enabling the experimental web platform features.
Which doesn't really help your users.
scroll-behavior: smooth;

Jquery “Smooth Scroll” not working

I have the following problem:
I tried to make a smooth, slow scroll to the top when clicking on a link using jQuery. I used the following script:
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
$('html,body').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
});
On top of the page I have a <h1>-Tag with the id:start, and at the bottom I have a link defined: a href="#start">Back to top</a>
jQuery script included.
Does anybody know why it's not working in my case, but working here?
Thanks for your help!
Your code seems to work fine, when creating code snippets, be sure to include all code (html & javascript)..
please take a look at the jsfiddle i put together for you.
https://jsfiddle.net/gfe3c43u/
HINT: Make sure that you are including the proper libraries wherever you are trying to run this code (note: my jsfiddle is using jquery 2.1.0)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

how to handle any javascript load finished event using jquery

I have a blog. I'm insert yahoo pipe. I need to remove yahoo pipe icon after script load finish.
script is here>>
<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.1.js">
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true}
</script>
My code is here>>
$("script[src=http://l.yimg.com/a/i/us/pps/listbadge_1.1.js]").load(function(){
$(".ybf").hide();
});
But this don't work.
How to handle script load finish?
Something like this should work.
$("DOM ITEM TO LOAD SCRIPT INTO").load(
"http://l.yimg.com/a/i/us/pps/listbadge_1.1.js",
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true},
function(){
$(".ybf").hide();
});
);
look under the examples:
http://docs.jquery.com/Ajax/load
This should get you started for Firefox 3+
$('.ybf').live('DOMAttrModified', function() {
if ($(this).css('display') !== 'none')
$(this).css('display', 'none');
});
I would look into the propertychange event for IE, but I didn't have any luck combining that event with the jQuery live events, probably because they don't bubble. There may be another way to work around this however.
Good luck!
EDIT: You might want to look into the liveQuery plugin for jQuery. It looks to have more functionality and you may be able to get live binding to the 'propertychanged' event that IE supports.

Categories

Resources