Как прокрутить страницу на определённое количество пикселей без анимации

Собственно, я пишу пет проект, мессенджер на React и node js, и при поподании на страницу я получаю из бд ограниченное количество записей(18), а когда пользователь докручивает до верха страницы(по умолчанию я делаю сколл до конца страницы), то должны подгружаться следующие 18 записей, но проблема в том что когда они прогружаются пользователь всё ещё на верху и из-за ему приходится самостоятельно прокрутить ниже чтобы посмотреть раньше написанные сообщения, поэтому я думал сделать типо якоря чтобы без анимации спустить пользователя, хотя возможно это будет печально выглядеть, если есть идея как сделать иначе обязательно попробую.

Компонент:

import React, { useEffect, useRef, useState } from 'react';
import icon from './../images/icon.png'
import Header from '../components/Header';
import PostService from '../API/PostService';
import Loader from '../components/UI/loader/Loader';
import io from "socket.io-client";
import { parseJwt } from '../helpers/ParseJwt';
import { MoreEleven, LowerEleven, Resize } from './../helpers/scroll.js'
import { Link } from 'react-router-dom';

const socket = io()

const Logged = () => {
  const [message, setMessage] = useState('')
  const [messages, setMessages] = useState([])
  const img = useRef()
  const massager = useRef()
  const PayLoad = parseJwt(localStorage.getItem('token'))
  const name = PayLoad.userName

  window.addEventListener('scroll', async () => {
    if(window.pageYOffset === 0) {
      if(messages.length === 0) return
      const post = await PostService.getMess(messages.length, messages.length)
      if(post[0] === undefined) return
      setMessages([...post, ...messages])
      window.scrollTo(0, 500)
    }
  })

  const changeMess = (e) => {
    setMessage(e.target.value)
    if(e.target.value !== '') img.current.classList.add('active')
    else img.current.classList.remove('active')
  }

  const emit = (e) => {
    e.preventDefault()
    if(message === '') return
    socket.emit('send mess', {name: name, mess: message})
    setMessage('')
  }

  socket.on('add mess', ({name, mess, id}) => {
    if(messages) setMessages([...messages, {name: name, text: mess}])
  })

  useEffect(() => {
    async function Post() {
      LowerEleven()
      const post = await PostService.getMess(0, 18)
      setMessages(post)
    }
    Post()
  }, [])

  useEffect(() => {
    if(messages.length > 18) return
    MoreEleven(massager, messages.length)
  }, [messages])

  Resize()

  return ( 
    <div className="all">
      <div className="some_text"></div>
      <div className="grow">
          <div className="header_massanger">
              <h5 className="text-center">Massanger</h5>
          </div>
      </div>
      <div className="all_content">
        <Header name={name} />
      </div>
      <main>
        <div className="main_content">
          <div className="container">
            <div className="the_massanger">
                
            </div>
          </div>
        </div>
      </main>

      <div className="messages" ref={massager}>
        <div className="all_mess">
          {messages
            ? messages.map((p, index) => 
              <div key={index}>
                <Link 
                  className="user_mess" 
                  to={{
                    pathname: `/profile?login=${p.name}`
                  }}
                  >
                   {p.name} 
                </Link>
                <p key={index} className="some_p">{p.text}</p>
              </div>
            )
            : <Loader />
          }
          <div className="some" style={{width: "100px", height: "110px"}}>
              
          </div>
        </div>
        <form id="mess-form" onSubmit={emit}>
          <div className="into_form">
            <input 
              type="text" 
              name="message" 
              id="message" 
              className="mb-4 send_mess" 
              placeholder="Напишите сообщение..." 
              style={{fontSize: '15px'}}
              value={message}
              onChange={changeMess}
            />
            <button type="submit" className="submit" name="do" ref={img}>
              <img src={icon} alt="send_ico" className="send_ico" />
            </button>
          </div>
        </form>
      </div>

      <div className="some_botton"></div>
      <div className="some_botton2"></div>
    </div>
  );
}
 
export default Logged;