Using jQuery to add scrolling animation.

[mrchow19910319]

I have this personal site I am writing. https://codepen.io/zhouxiang19910319/pen/bKJEPB?editors=1010 

I simply want to add some scrolling animation on those a tags.

I want the page to scroll to somewhere instead of jump straight into somewhere. 

 

Some developer on another forum told me something like this :

 

Quote

So to accomplish you have correctly targeted the anchor tags with a click event. The issue is, you want to prevent the default behavior of clicking an anchor. The default behavior is to jump immediately to the target specified in the href attribute. Read about preventDefault to stop this from occurring. Next, you need to target the section you want to scroll smoothly to. What you want is the value of the href attribute of the anchor which was clicked. Your smooth_scrolling function needs a parameter (event) to capture the click event object. To reference which anchor was clicked, you would refer to event.target. Now, you need to get the value of the href attribute of the event.target element. See if you can find a jQuery method which helps you do this. Once you do that you need to use a jQuery selector which targets this href (which will be a string which looks like #work, #about_me, or #form_section and use the applicable scrollIntoView properties for the smooth transition.

$("a").click(function (event) {
  // need prevent the default action of the click event here
  const href = ??? // ??? will be a string of the href attribute for clicked anchor element
  $(href)[0].scrollIntoView({
    behavior: "smooth"
  });
});

okay, here is my understanding: I need to do 3 things. 

 

1. preventDefault behavior on a tags.

2. target the section I want to scroll into (event.target is involved??how do I use that??)

3. use a jQuery selector to target the hrefs

 

this is the js code I "wrote".. could someone points out to me what's wrong with the logic behind it? 

//scrolling effect
var element = document.getElementByTagName("a");

//prevent default behavior
$("a").click(function(event) {
  event.preventDefault();
  $("<div>")
    .append("default " + event.type + " prevented")
    .appendTo("#log");
});

$("a").click(function smooth_scrolling(event) {
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

 

 

[myselfolli]

This should work (although not tested):

 

<a href="" div-id="div1">Click me!</a>
<a href="" div-id="div2">Click me as well!</a>

<div id="div1">
  <p>And scroll to me!</p>
</div>

<div id="div2">
  <p>And you should be able to see your browser scrolling me into view.</p>
</div>

$("a").click(function(event) {
  event.preventDefault();
  var div-id = $(event.target).attr(div-id);
  var element = $('#' + div-id);
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

Your problem is, that you're trying to use JavaScript and jQuery selectors interchangeably. Which doesn't work.

Also you had a logic error: You were trying to scroll to the anchor (<a>)-tag you just clicked. You need to link your divs to your a-tags.

[mrchow19910319]

12 minutes ago, myselfolli said:

This should work (although not tested):

 

Your problem is, that you're trying to use JavaScript and jQuery selectors interchangeably. Which doesn't work.

Also you had a logic error: You were trying to scroll to the anchor (<a>)-tag you just clicked. You need to link your divs to your a-tags.

$("a").click(function(event) {
  event.preventDefault();
  var div-id = $(event.target).attr(div-id);
  var element = $('#' + div-id);
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

I changed the above code to this: 

//scrolling effect
$("a").click(function(event) {
  //prevent default behavor
  event.preventDefault();
  //scrolling effect
  var x = $(event.target).attr(href);
  var element = $('#' + x);
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

but other than prevent default behaviour it still does't work.

[myselfolli]

5 minutes ago, mrchow19910319 said:

$("a").click(function(event) {
  event.preventDefault();
  var div-id = $(event.target).attr(div-id);
  var element = $('#' + div-id);
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

I changed the above code to this: 

//scrolling effect
$("a").click(function(event) {
  //prevent default behavor
  event.preventDefault();
  //scrolling effect
  var x = $(event.target).attr(href);
  var element = $('#' + x);
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

but other than prevent default behaviour it still does't work.

Okay, what is the href-attribute of the link you are clicking?

I'd recommend inserting some outputs at various points on your code, for debugging purposes:

 

//scrolling effect
$("a").click(function(event) {
  //prevent default behavor
  event.preventDefault();
  //scrolling effect
  var x = $(event.target).attr(href);
  console.log(x);
  var element = $('#' + x);
  console.log(element);
  element.scrollIntoView({
    behaviour: "smooth"
  });
});

 

[vorticalbox]

2 hours ago, myselfolli said:

I'd recommend inserting some outputs at various points on your code, for debugging purposes:

or you can use chrome dev tool and break points.

[myselfolli]

22 hours ago, vorticalbox said:

or you can use chrome dev tool and break points.

That too