'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 |