'Add smooth scroll in localstorage favorite list

I have a good working javascript code which scroll page to the id of specific favorite item. But the scroll is just a jump from item to item. What I want and can't do alone is to make a smooth scroll. I try html smooth behavior but it's not working on mobile so I want it in javascript.Here is my code:

//index db

const favoriteButtonAttr = 'data-add-to-favorite';
const isFavorite = 'data-is-favorite';
const listSelector = '[data-my-favorites]';

class FavoritesList {
  constructor () {
    this.storageName = 'favoritesList';
    this.list = this.initList();
  }
  
  initList () {
    if (window.localStorage.getItem(this.storageName)) { 
      // todo: repetitive parse?
      const list = JSON.parse(window.localStorage.getItem(this.storageName));
      updateHtmlList(list);
      return list;
    } else {   
      return [];
    }
  }
  
  initButton(button) {
    const id = parseInt(button.getAttribute(favoriteButtonAttr));
    
    button.addEventListener('click', (event) => {
      const button = event.target;
      !inArray(id, this.list) ? this.list.push(id) : removeFromArray(id, this.list);
      setState(id, this.list);
      this.updateList();
    })
    
    function setState (id, list) {
      return button.toggleAttribute(isFavorite, inArray(id, list));
    }
    
    setState(id, this.list);
    return button;
  }
  
  updateList() {
    setLocalStorage(this.storageName, this.list);
    updateHtmlList(this.list); 
  }
}

function updateHtmlList(list) {
  if(list.length > 0) {
    // lastest favorites on top & don't modify original list;
    const newList = list.slice(0).reverse();
    favoritesHTMLElement.innerHTML = '';
    listItems = document.createElement('ul');
    newList.forEach( item => {
      let htmlLi = document.createElement('lis');
      htmlLis.innerHTML = item;
      favoritesHTMLElement.appendChild(htmlLis);
    });
  } else {
    favoritesHTMLElement.innerHTML = '';
  }
} 

function inArray(element, array) {
  return array.indexOf(element) != -1;
}

function removeFromArray(element, array) {
  array.splice(array.indexOf(element), 1); 
}

function setLocalStorage(key, value) {
  console.log(value)
  window.localStorage.setItem(key, JSON.stringify(value));
}

const buttons = document.querySelectorAll(`[${favoriteButtonAttr}]`);
const favoritesHTMLElement = document.querySelector(listSelector);
let favorites = new FavoritesList();  
buttons.forEach( button => favorites.initButton(button) );

function updateHtmlList(list) {
  if(list.length > 0) {
    // lastest favorites on top & don't modify original list;
    const newList = list.slice(0).reverse();
    favoritesHTMLElement.innerHTML = '';
    listItems = document.createElement('ul');
    newList.forEach( item => {
      let htmlLis = document.createElement('lis');

      htmlLis.innerHTML = '<a href="#'+item+'" class="go-to-link">💛 '+item+'</a>';      

      favoritesHTMLElement.appendChild(htmlLis);
    });
  } else {
    favoritesHTMLElement.innerHTML = '';
  }
} 

I try smooth behavior in html but its not working on mobile so I need it in javascript code.



Solution 1:[1]

To use smooth scrolling, add the following in your CSS.

html {
  scroll-behavior: smooth;
}

This will enable smooth scrolling for the entire webpage (everything in the html tag).

Solution 2:[2]

Here is how to do it in JS:

document.querySelector("html").style.scrollBehavior = "smooth";

Solution 3:[3]

You can achieve this by using only 1) javascript or only 2) css.

Javascript version

You can us the javascript function scrollTo().
https://developer.mozilla.org/de/docs/Web/API/Window/scrollTo

window.scrollTo({
  top: 100,
  behavior: 'smooth'
})

CSS version

If you want with css only you can use scroll-behavoir. But it dont works in all browsers. https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior

scroll-behavior: smooth;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bahram Gozalov
Solution 3 Maik Lowrey