Sample:
Code:
<button>Bring me to the end of the list</button>
<ul class="numbers">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
<li>025</li>
<li>026</li>
<li>027</li>
<li>028</li>
<li>029</li>
<li>030</li>
<li>031</li>
<li>032</li>
<li>033</li>
<li>034</li>
<li>035</li>
<li>036</li>
<li>037</li>
<li>038</li>
<li>039</li>
<li>040</li>
<li>041</li>
<li>042</li>
<li>043</li>
<li>044</li>
<li>045</li>
<li>046</li>
<li>047</li>
<li>048</li>
<li>049</li>
<li>050</li>
<li>051</li>
<li>052</li>
<li>053</li>
<li>054</li>
<li>055</li>
<li>056</li>
<li>057</li>
<li>058</li>
<li>059</li>
<li>060</li>
<li>061</li>
<li>062</li>
<li>063</li>
<li>064</li>
<li>065</li>
<li>066</li>
<li>067</li>
<li>068</li>
<li>069</li>
<li>070</li>
<li>071</li>
<li>072</li>
<li>073</li>
<li>074</li>
<li>075</li>
<li>076</li>
<li>077</li>
<li>078</li>
<li>079</li>
<li>080</li>
<li>081</li>
<li>082</li>
<li>083</li>
<li>084</li>
<li>085</li>
<li>086</li>
<li>087</li>
<li>088</li>
<li>089</li>
<li>090</li>
<li>091</li>
<li>092</li>
<li>093</li>
<li>094</li>
<li>095</li>
<li>096</li>
<li>097</li>
<li>098</li>
<li>099</li>
<li>100</li>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
<li>111</li>
<li>112</li>
<li>113</li>
<li>114</li>
<li>115</li>
<li>116</li>
<li>117</li>
<li>118</li>
<li>119</li>
<li>120</li>
<li>121</li>
<li>122</li>
<li>123</li>
<li>124</li>
<li>125</li>
<li>126</li>
<li>127</li>
<li>128</li>
<li>129</li>
<li>130</li>
<li>131</li>
<li>132</li>
<li>133</li>
<li>134</li>
<li>135</li>
<li>136</li>
<li>137</li>
<li>138</li>
<li>139</li>
<li>140</li>
<li>141</li>
<li>142</li>
<li>143</li>
<li>144</li>
<li>145</li>
<li>146</li>
<li>147</li>
<li>148</li>
<li>149</li>
<li>150</li>
<li>151</li>
<li>152</li>
<li>153</li>
<li>154</li>
<li>155</li>
<li>156</li>
<li>157</li>
<li>158</li>
<li>159</li>
<li>160</li>
<li>161</li>
<li>162</li>
<li>163</li>
<li>164</li>
<li>165</li>
<li>166</li>
<li>167</li>
<li>168</li>
<li>169</li>
<li>170</li>
<li>171</li>
<li>172</li>
<li>173</li>
<li>174</li>
<li>175</li>
<li>176</li>
<li>177</li>
<li>178</li>
<li>179</li>
<li>180</li>
<li>181</li>
<li>182</li>
<li>183</li>
<li>184</li>
<li>185</li>
<li>186</li>
<li>187</li>
<li>188</li>
<li>189</li>
<li>190</li>
<li>191</li>
<li>192</li>
<li>193</li>
<li>194</li>
<li>195</li>
<li>196</li>
<li>197</li>
<li>198</li>
<li>199</li>
<li>200</li>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
<li>205</li>
<li>206</li>
<li>207</li>
<li>208</li>
<li>209</li>
<li>210</li>
<li>211</li>
<li>212</li>
<li>213</li>
<li>214</li>
<li>215</li>
<li>216</li>
<li>217</li>
<li>218</li>
<li>219</li>
<li>220</li>
<li>221</li>
<li>222</li>
<li>223</li>
<li>224</li>
<li>225</li>
<li>226</li>
<li>227</li>
<li>228</li>
<li>229</li>
<li>230</li>
<li>231</li>
<li>232</li>
<li>233</li>
<li>234</li>
<li>235</li>
<li>236</li>
<li>237</li>
<li>238</li>
<li>239</li>
<li>240</li>
<li>241</li>
<li>242</li>
<li>243</li>
<li>244</li>
<li>245</li>
<li>246</li>
<li>247</li>
<li>248</li>
<li>249</li>
<li>250</li>
<li>251</li>
<li>252</li>
<li>253</li>
<li>254</li>
<li>255</li>
<li>256</li>
<li>257</li>
<li>258</li>
<li>259</li>
<li>260</li>
<li>261</li>
<li>262</li>
<li>263</li>
<li>264</li>
<li>265</li>
<li>266</li>
<li>267</li>
<li>268</li>
<li>269</li>
<li>270</li>
<li>271</li>
<li>272</li>
<li>273</li>
<li>274</li>
<li>275</li>
<li>276</li>
<li>277</li>
<li>278</li>
<li>279</li>
<li>280</li>
<li>281</li>
<li>282</li>
<li>283</li>
<li>284</li>
<li>285</li>
<li>286</li>
<li>287</li>
<li>288</li>
<li>289</li>
<li>290</li>
<li>291</li>
<li>292</li>
<li>293</li>
<li>294</li>
<li>295</li>
<li>296</li>
<li>297</li>
<li>298</li>
<li>299</li>
<li>300</li>
<li>301</li>
<li>302</li>
<li>303</li>
<li>304</li>
<li>305</li>
<li>306</li>
<li>307</li>
<li>308</li>
<li>309</li>
<li>310</li>
<li>311</li>
<li>312</li>
<li>313</li>
<li>314</li>
<li>315</li>
<li>316</li>
<li>317</li>
<li>318</li>
<li>319</li>
<li>320</li>
<li>321</li>
<li>322</li>
<li>323</li>
<li>324</li>
<li>325</li>
<li>326</li>
<li>327</li>
<li>328</li>
<li>329</li>
<li>330</li>
<li>331</li>
<li>332</li>
<li>333</li>
<li>334</li>
<li>335</li>
<li>336</li>
<li>337</li>
<li>338</li>
<li>339</li>
<li>340</li>
<li>341</li>
<li>342</li>
<li>343</li>
<li>344</li>
<li>345</li>
<li>346</li>
<li>347</li>
<li>348</li>
<li>349</li>
<li>350</li>
<li>351</li>
<li>352</li>
<li>353</li>
<li>354</li>
<li>355</li>
<li>356</li>
<li>357</li>
<li>358</li>
<li>359</li>
<li>360</li>
<li>361</li>
<li>362</li>
<li>363</li>
<li>364</li>
<li>365</li>
<li>366</li>
<li>367</li>
<li>368</li>
<li>369</li>
<li>370</li>
<li>371</li>
<li>372</li>
<li>373</li>
<li>374</li>
<li>375</li>
<li>376</li>
<li>377</li>
<li>378</li>
<li>379</li>
<li>380</li>
<li>381</li>
<li>382</li>
<li>383</li>
<li>384</li>
<li>385</li>
<li>386</li>
<li>387</li>
<li>388</li>
<li>389</li>
<li>390</li>
<li>391</li>
<li>392</li>
<li>393</li>
<li>394</li>
<li>395</li>
<li>396</li>
<li>397</li>
<li>398</li>
<li>399</li>
<li>400</li>
<li>401</li>
<li>402</li>
<li>403</li>
<li>404</li>
<li>405</li>
<li>406</li>
<li>407</li>
<li>408</li>
<li>409</li>
<li>410</li>
<li>411</li>
<li>412</li>
<li>413</li>
<li>414</li>
<li>415</li>
<li>416</li>
<li>417</li>
<li>418</li>
<li>419</li>
<li>420</li>
<li>421</li>
<li>422</li>
<li>423</li>
<li>424</li>
<li>425</li>
<li>426</li>
<li>427</li>
<li>428</li>
<li>429</li>
<li>430</li>
<li>431</li>
<li>432</li>
<li>433</li>
<li>434</li>
<li>435</li>
<li>436</li>
<li>437</li>
<li>438</li>
<li>439</li>
<li>440</li>
<li>441</li>
<li>442</li>
<li>443</li>
<li>444</li>
<li>445</li>
<li>446</li>
<li>447</li>
<li>448</li>
<li>449</li>
<li>450</li>
<li>451</li>
<li>452</li>
<li>453</li>
<li>454</li>
<li>455</li>
<li>456</li>
<li>457</li>
<li>458</li>
<li>459</li>
<li>460</li>
<li>461</li>
<li>462</li>
<li>463</li>
<li>464</li>
<li>465</li>
<li>466</li>
<li>467</li>
<li>468</li>
<li>469</li>
<li>470</li>
<li>471</li>
<li>472</li>
<li>473</li>
<li>474</li>
<li>475</li>
<li>476</li>
<li>477</li>
<li>478</li>
<li>479</li>
<li>480</li>
<li>481</li>
<li>482</li>
<li>483</li>
<li>484</li>
<li>485</li>
<li>486</li>
<li>487</li>
<li>488</li>
<li>489</li>
<li>490</li>
<li>491</li>
<li>492</li>
<li>493</li>
<li>494</li>
<li>495</li>
<li>496</li>
<li>497</li>
<li>498</li>
<li>499</li>
<li>500</li>
<li>501</li>
<li>502</li>
<li>503</li>
<li>504</li>
<li>505</li>
<li>506</li>
<li>507</li>
<li>508</li>
<li>509</li>
<li>510</li>
<li>511</li>
<li>512</li>
<li>513</li>
<li>514</li>
<li>515</li>
<li>516</li>
<li>517</li>
<li>518</li>
<li>519</li>
<li>520</li>
<li>521</li>
<li>522</li>
<li>523</li>
<li>524</li>
<li>525</li>
<li>526</li>
<li>527</li>
<li>528</li>
<li>529</li>
<li>530</li>
<li>531</li>
<li>532</li>
<li>533</li>
<li>534</li>
<li>535</li>
<li>536</li>
<li>537</li>
<li>538</li>
<li>539</li>
<li>540</li>
<li>541</li>
<li>542</li>
<li>543</li>
<li>544</li>
<li>545</li>
<li>546</li>
<li>547</li>
<li>548</li>
<li>549</li>
<li>550</li>
<li>551</li>
<li>552</li>
<li>553</li>
<li>554</li>
<li>555</li>
<li>556</li>
<li>557</li>
<li>558</li>
<li>559</li>
<li>560</li>
<li>561</li>
<li>562</li>
<li>563</li>
<li>564</li>
<li>565</li>
<li>566</li>
<li>567</li>
<li>568</li>
<li>569</li>
<li>570</li>
<li>571</li>
<li>572</li>
<li>573</li>
<li>574</li>
<li>575</li>
<li>576</li>
<li>577</li>
<li>578</li>
<li>579</li>
<li>580</li>
<li>581</li>
<li>582</li>
<li>583</li>
<li>584</li>
<li>585</li>
<li>586</li>
<li>587</li>
<li>588</li>
<li>589</li>
<li>590</li>
<li>591</li>
<li>592</li>
<li>593</li>
<li>594</li>
<li>595</li>
<li>596</li>
<li>597</li>
<li>598</li>
<li>599</li>
<li>600</li>
<li>601</li>
<li>602</li>
<li>603</li>
<li>604</li>
<li>605</li>
<li>606</li>
<li>607</li>
<li>608</li>
<li>609</li>
<li>610</li>
<li>611</li>
<li>612</li>
<li>613</li>
<li>614</li>
<li>615</li>
<li>616</li>
<li>617</li>
<li>618</li>
<li>619</li>
<li>620</li>
<li>621</li>
<li>622</li>
<li>623</li>
<li>624</li>
<li>625</li>
<li>626</li>
<li>627</li>
<li>628</li>
<li>629</li>
<li>630</li>
<li>631</li>
<li>632</li>
<li>633</li>
<li>634</li>
<li>635</li>
<li>636</li>
<li>637</li>
<li>638</li>
<li>639</li>
<li>640</li>
<li>641</li>
<li>642</li>
<li>643</li>
<li>644</li>
<li>645</li>
<li>646</li>
<li>647</li>
<li>648</li>
<li>649</li>
<li>650</li>
<li>651</li>
<li>652</li>
<li>653</li>
<li>654</li>
<li>655</li>
<li>656</li>
<li>657</li>
<li>658</li>
<li>659</li>
<li>660</li>
<li>661</li>
<li>662</li>
<li>663</li>
<li>664</li>
<li>665</li>
<li>666</li>
<li>667</li>
<li>668</li>
<li>669</li>
<li>670</li>
<li>671</li>
<li>672</li>
<li>673</li>
<li>674</li>
<li>675</li>
<li>676</li>
<li>677</li>
<li>678</li>
<li>679</li>
<li>680</li>
<li>681</li>
<li>682</li>
<li>683</li>
<li>684</li>
<li>685</li>
<li>686</li>
<li>687</li>
<li>688</li>
<li>689</li>
<li>690</li>
<li>691</li>
<li>692</li>
<li>693</li>
<li>694</li>
<li>695</li>
<li>696</li>
<li>697</li>
<li>698</li>
<li>699</li>
<li>700</li>
<li>701</li>
<li>702</li>
<li>703</li>
<li>704</li>
<li>705</li>
<li>706</li>
<li>707</li>
<li>708</li>
<li>709</li>
<li>710</li>
<li>711</li>
<li>712</li>
<li>713</li>
<li>714</li>
<li>715</li>
<li>716</li>
<li>717</li>
<li>718</li>
<li>719</li>
<li>720</li>
<li>721</li>
<li>722</li>
<li>723</li>
<li>724</li>
<li>725</li>
<li>726</li>
<li>727</li>
<li>728</li>
<li>729</li>
<li>730</li>
<li>731</li>
<li>732</li>
<li>733</li>
<li>734</li>
<li>735</li>
<li>736</li>
<li>737</li>
<li>738</li>
<li>739</li>
<li>740</li>
<li>741</li>
<li>742</li>
<li>743</li>
<li>744</li>
<li>745</li>
<li>746</li>
<li>747</li>
<li>748</li>
<li>749</li>
<li>750</li>
<li>751</li>
<li>752</li>
<li>753</li>
<li>754</li>
<li>755</li>
<li>756</li>
<li>757</li>
<li>758</li>
<li>759</li>
<li>760</li>
<li>761</li>
<li>762</li>
<li>763</li>
<li>764</li>
<li>765</li>
<li>766</li>
<li>767</li>
<li>768</li>
<li>769</li>
<li>770</li>
<li>771</li>
<li>772</li>
<li>773</li>
<li>774</li>
<li>775</li>
<li>776</li>
<li>777</li>
<li>778</li>
<li>779</li>
<li>780</li>
<li>781</li>
<li>782</li>
<li>783</li>
<li>784</li>
<li>785</li>
<li>786</li>
<li>787</li>
<li>788</li>
<li>789</li>
<li>790</li>
<li>791</li>
<li>792</li>
<li>793</li>
<li>794</li>
<li>795</li>
<li>796</li>
<li>797</li>
<li>798</li>
<li>799</li>
<li>800</li>
<li>801</li>
<li>802</li>
<li>803</li>
<li>804</li>
<li>805</li>
<li>806</li>
<li>807</li>
<li>808</li>
<li>809</li>
<li>810</li>
<li>811</li>
<li>812</li>
<li>813</li>
<li>814</li>
<li>815</li>
<li>816</li>
<li>817</li>
<li>818</li>
<li>819</li>
<li>820</li>
<li>821</li>
<li>822</li>
<li>823</li>
<li>824</li>
<li>825</li>
<li>826</li>
<li>827</li>
<li>828</li>
<li>829</li>
<li>830</li>
<li>831</li>
<li>832</li>
<li>833</li>
<li>834</li>
<li>835</li>
<li>836</li>
<li>837</li>
<li>838</li>
<li>839</li>
<li>840</li>
<li>841</li>
<li>842</li>
<li>843</li>
<li>844</li>
<li>845</li>
<li>846</li>
<li>847</li>
<li>848</li>
<li>849</li>
<li>850</li>
<li>851</li>
<li>852</li>
<li>853</li>
<li>854</li>
<li>855</li>
<li>856</li>
<li>857</li>
<li>858</li>
<li>859</li>
<li>860</li>
<li>861</li>
<li>862</li>
<li>863</li>
<li>864</li>
<li>865</li>
<li>866</li>
<li>867</li>
<li>868</li>
<li>869</li>
<li>870</li>
<li>871</li>
<li>872</li>
<li>873</li>
<li>874</li>
<li>875</li>
<li>876</li>
<li>877</li>
<li>878</li>
<li>879</li>
<li>880</li>
<li>881</li>
<li>882</li>
<li>883</li>
<li>884</li>
<li>885</li>
<li>886</li>
<li>887</li>
<li>888</li>
<li>889</li>
<li>890</li>
<li>891</li>
<li>892</li>
<li>893</li>
<li>894</li>
<li>895</li>
<li>896</li>
<li>897</li>
<li>898</li>
<li>899</li>
<li>900</li>
<li>901</li>
<li>902</li>
<li>903</li>
<li>904</li>
<li>905</li>
<li>906</li>
<li>907</li>
<li>908</li>
<li>909</li>
<li>910</li>
<li>911</li>
<li>912</li>
<li>913</li>
<li>914</li>
<li>915</li>
<li>916</li>
<li>917</li>
<li>918</li>
<li>919</li>
<li>920</li>
<li>921</li>
<li>922</li>
<li>923</li>
<li>924</li>
<li>925</li>
<li>926</li>
<li>927</li>
<li>928</li>
<li>929</li>
<li>930</li>
<li>931</li>
<li>932</li>
<li>933</li>
<li>934</li>
<li>935</li>
<li>936</li>
<li>937</li>
<li>938</li>
<li>939</li>
<li>940</li>
<li>941</li>
<li>942</li>
<li>943</li>
<li>944</li>
<li>945</li>
<li>946</li>
<li>947</li>
<li>948</li>
<li>949</li>
<li>950</li>
<li>951</li>
<li>952</li>
<li>953</li>
<li>954</li>
<li>955</li>
<li>956</li>
<li>957</li>
<li>958</li>
<li>959</li>
<li>960</li>
<li>961</li>
<li>962</li>
<li>963</li>
<li>964</li>
<li>965</li>
<li>966</li>
<li>967</li>
<li>968</li>
<li>969</li>
<li>970</li>
<li>971</li>
<li>972</li>
<li>973</li>
<li>974</li>
<li>975</li>
<li>976</li>
<li>977</li>
<li>978</li>
<li>979</li>
<li>980</li>
<li>981</li>
<li>982</li>
<li>983</li>
<li>984</li>
<li>985</li>
<li>986</li>
<li>987</li>
<li>988</li>
<li>989</li>
<li>990</li>
<li>991</li>
<li>992</li>
<li>993</li>
<li>994</li>
<li>995</li>
<li>996</li>
<li>997</li>
<li>998</li>
<li>999</li>
<li>1000</li>
</ul>
<script>
const button = document.querySelector('button');
const motionQuery = matchMedia('(prefers-reduced-motion: no-preference)');
let behavior;
const handleReducedMotion = () => {
if (motionQuery.matches) {
behavior = 'smooth';
} else {
behavior = 'instant'
}
}
motionQuery.addListener(handleReducedMotion);
handleReducedMotion();
button.addEventListener('click', e => {
document.querySelector('.numbers > :last-child').scrollIntoView({
behavior: behavior
});
})
</script>