Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

216
Views
vue.js smooth scroll to middle, bottom and back top top with arrow keys

I would like to use the up and down arrow keys to smoothscroll down and up the page.

The first down keypress should take me to the middle (50%),
the second down keypress to the bottom of the page
and vice versa with the up key.

Is this possible with vue?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

This should be possible with vue.js and/or some JavaScript. If you want to bind this actions to some html elements, you should take a look at KeyCode Modifiers, where you have the option to bind them on v-on. If you just want to use some JavaScript without binding the actions to vue.js, it could be something like this:

document.onkeydown = keyDownFunc;

function keyDownFunc(e) {
    e = e || window.event;

    if (e.keyCode == '40') {
        // do something
    }
}

In this case 40 is arrow down. To get your key codes just visit: keycode.info.

about 4 years ago · Juan Pablo Isaza Report

0

This is possible with pure javascript, hence also possible with vue

Have a look at this example

First, pay attention to this method:

    scrollView(amount) {
      let scrollFromTop = window.pageYOffset;
      const viewHeight = Math.round(window.innerHeight * Math.abs(amount));
      if (scrollFromTop % viewHeight === 0) scrollFromTop += Math.sign(amount);
      let targetPos;
      if (amount > 0)
        targetPos = Math.ceil(scrollFromTop / viewHeight) * viewHeight;
      else
        targetPos = Math.floor(scrollFromTop / viewHeight) * viewHeight;
      window.scrollTo({
        top: targetPos,
        behavior: "smooth"
      });
    }

It determines view height and current scroll from top. Then, it scrolls the page up or down based on provided amount and in relation with view size.

NB: smooth scrolling is not yet supported in some browsers, you should use smoothscroll-polyfill, if you decide to implement this solution.

Next have a look at these couple of hooks responsible for key event listening:

  mounted() {
    window.addEventListener("keydown", this.keyHandler);
  },
  beforeUnmount() {
    window.removeEventListener("keydown", this.keyHandler);
  }

And last but not least, event handling logic:

    keyHandler(e) {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        this.scrollView(this.scrollAmount); 
      }
      if (e.key === 'ArrowUp') {
        e.preventDefault();
        this.scrollView(this.scrollAmount * -1); 
      }
    },
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!