Change sroll method to findPos
parent
b5a73c6e48
commit
46f586a803
|
@ -16,6 +16,7 @@
|
||||||
|
|
||||||
let weaponCalc;
|
let weaponCalc;
|
||||||
let characterCalc;
|
let characterCalc;
|
||||||
|
let resinCalc;
|
||||||
|
|
||||||
function openHowTo() {
|
function openHowTo() {
|
||||||
openModal(
|
openModal(
|
||||||
|
@ -28,17 +29,23 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function scroll(type) {
|
export function findPos(id) {
|
||||||
const elementPosition =
|
let node = document.getElementById(id);
|
||||||
type === 'character' ? characterCalc.getBoundingClientRect().top : weaponCalc.getBoundingClientRect().top;
|
let curtop = 0;
|
||||||
const headerOffset = 80;
|
let curtopscroll = 0;
|
||||||
const offsetPosition = elementPosition - headerOffset;
|
let headerOffset = 40;
|
||||||
|
if (node.offsetParent) {
|
||||||
|
do {
|
||||||
|
curtop += node.offsetTop;
|
||||||
|
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
|
||||||
|
} while ((node = node.offsetParent));
|
||||||
|
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
top: offsetPosition,
|
top: curtop - curtopscroll - headerOffset,
|
||||||
behavior: 'smooth',
|
behavior: 'smooth',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
@ -60,14 +67,15 @@
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
id="weapon"
|
||||||
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
|
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
|
||||||
bind:this={weaponCalc}
|
|
||||||
>
|
>
|
||||||
<Button on:click={() => scroll('character')}>
|
<Button on:click={() => findPos('character')}>
|
||||||
<Icon size={0.8} path={mdiArrowDown} />
|
<Icon size={0.8} path={mdiArrowDown} />
|
||||||
{$t('calculator.goto')}
|
{$t('calculator.goto')}
|
||||||
{$t('calculator.titleCharacter')}
|
{$t('calculator.titleCharacter')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<h1
|
<h1
|
||||||
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
|
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
|
||||||
>
|
>
|
||||||
|
@ -76,14 +84,19 @@
|
||||||
</div>
|
</div>
|
||||||
<WeaponCalculator />
|
<WeaponCalculator />
|
||||||
<div
|
<div
|
||||||
|
id="character"
|
||||||
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
|
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
|
||||||
bind:this={characterCalc}
|
|
||||||
>
|
>
|
||||||
<Button on:click={() => scroll('weapon')}>
|
<Button on:click={() => findPos('weapon')}>
|
||||||
<Icon size={0.8} path={mdiArrowUp} />
|
<Icon size={0.8} path={mdiArrowUp} />
|
||||||
{$t('calculator.goto')}
|
{$t('calculator.goto')}
|
||||||
{$t('calculator.titleWeapon')}
|
{$t('calculator.titleWeapon')}
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button className="md:mb-0 md:ml-4 mb-4" on:click={() => findPos('resin')}>
|
||||||
|
<Icon size={0.8} path={mdiArrowDown} />
|
||||||
|
{$t('calculator.goto')}
|
||||||
|
{$t('calculator.titleResin')}
|
||||||
|
</Button>
|
||||||
<h1
|
<h1
|
||||||
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
|
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
|
||||||
>
|
>
|
||||||
|
@ -91,7 +104,15 @@
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<CharacterCalculator />
|
<CharacterCalculator />
|
||||||
<div class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2">
|
<div
|
||||||
|
id="resin"
|
||||||
|
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
|
||||||
|
>
|
||||||
|
<Button on:click={() => findPos('character')}>
|
||||||
|
<Icon size={0.8} path={mdiArrowUp} />
|
||||||
|
{$t('calculator.goto')}
|
||||||
|
{$t('calculator.titleCharacter')}
|
||||||
|
</Button>
|
||||||
<h1
|
<h1
|
||||||
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
|
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue