如何让按钮点击后转到页面的某个部分？

您可以使用 document.getElementById('yourbasket').scrollIntoView();if (document.readyState == 'loading') {    document.addEventListener('DOMContentLoaded', ready)} else {    ready()}function ready() {    var removeCartItemButtons = document.getElementsByClassName('btn-danger')    for (var i = 0; i < removeCartItemButtons.length; i++) {        var button = removeCartItemButtons[i]        button.addEventListener('click', removeCartItem)    }    var quantityInputs = document.getElementsByClassName('cart-quantity-input')    for (var i = 0; i < quantityInputs.length; i++) {        var input = quantityInputs[i]        input.addEventListener('change', quantityChanged)    }    var addToCartButtons = document.getElementsByClassName('shop-item-button')    for (var i = 0; i < addToCartButtons.length; i++) {        var button = addToCartButtons[i]        button.addEventListener('click', addToCartClicked)    }    document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)}function purchaseClicked() {    alert('Thank you for your purchase')    var cartItems = document.getElementsByClassName('cart-items')[0]    while (cartItems.hasChildNodes()) {        cartItems.removeChild(cartItems.firstChild)    }    updateCartTotal()}function removeCartItem(event) {    var buttonClicked = event.target    buttonClicked.parentElement.parentElement.remove()    updateCartTotal()}function quantityChanged(event) {    var input = event.target    if (isNaN(input.value) || input.value <= 0) {        input.value = 1    }    updateCartTotal()}function addToCartClicked(event) {    var button = event.target    var shopItem = button.parentElement.parentElement    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText    addItemToCart(title, price)    updateCartTotal()}function addItemToCart(title, price) {    var cartRow = document.createElement('div')    cartRow.classList.add('cart-row')    var cartItems = document.getElementsByClassName('cart-items')[0]    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')    for (var i = 0; i < cartItemNames.length; i++) {        if (cartItemNames[i].innerText == title) {            alert('This item is already added to the cart')            return        }    }    var cartRowContents = `        <div class="cart-item cart-column">            <span class="cart-item-title">${title}</span>        </div>        <span class="cart-price cart-column">${price}</span>        <div class="cart-quantity cart-column">            <input class="cart-quantity-input" type="number" value="1">            <button class="btn btn-danger" type="button">REMOVE</button>        </div>`    cartRow.innerHTML = cartRowContents    cartItems.append(cartRow)    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)    document.getElementById('yourbasket').scrollIntoView();}function updateCartTotal() {var cartItemContainer = document.getElementsByClassName('cart-items')[0]var cartRows = cartItemContainer.getElementsByClassName('cart-row')var total = 0for (var i = 0; i < cartRows.length; i++) {    var cartRow = cartRows[i]    var priceElement = cartRow.getElementsByClassName('cart-price')[0]    var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]    var price = parseFloat(priceElement.innerText.replace('£', ''))    var quantity = quantityElement.value    total = total + (price * quantity)}total = Math.round(total * 100) / 100document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total.toFixed(2)}<!DOCTYPE html><html><head>   </head><body><header class="main-header">    <nav class="main-nav nav">    </nav></header>    <div class="shop-items">        <div class="shop-item">            <span class="shop-item-title">Album 0</span>             <div class="shop-item-details"><span class="shop-item-price">£12.50</span>            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>        </div>  <div class="shop-item">        <span class="shop-item-title">Album 2</span>         <div class="shop-item-details">            <span class="shop-item-price">£14.50</span>                       <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>        </div>        <div class="shop-item">        <span class="shop-item-title">Album 4</span>         <div class="shop-item-details"><span class="shop-item-price">£19.50</span>        <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>    </div>        </div></section>    <div class="shop-items">        <div class="shop-item">            <span class="shop-item-title">Album 6</span>             <div class="shop-item-details"><span class="shop-item-price">£19.50</span>            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>        </div>     <div class="shop-items">        <div class="shop-item">            <span class="shop-item-title">Album 8</span>             <div class="shop-item-details"><span class="shop-item-price">£19.50</span>            <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>        </div>              </div></section><section id="yourbasket" class="container content-section">    <h2 class="section-header">Basket</h2>  <div class="cart-row">        <span class="cart-item cart-header cart-column">ITEM</span>        <span class="cart-price cart-header cart-column">PRICE</span>        <span class="cart-quantity cart-header cart-column">QUANTITY</span>    </div>    <p></p> <div class="cart-items">    </div>    <div class="cart-total">        <strong class="cart-total-title">Total</strong>        <span class="cart-total-price">£0</span>    </div>    <button class="btn btn-primary btn-purchase" type="button">CHECKOUT</button></section></body></html>

如何让按钮点击后转到页面的某个部分？

2回答