[js常用]頁(yè)面滾動(dòng)的頂部,指定位置或底部,平滑滾動(dòng)

番茄西紅柿發(fā)布于2019-04-23 13:08 / 2541人閱讀

摘要：平滑滾動(dòng)到頂部底部指定地方平滑滾動(dòng)到頂部底部指定地方這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹返回頂部產(chǎn)品介紹滑到底部

js平滑滾動(dòng)到頂部、底部、指定地方

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js平滑滾動(dòng)到頂部、底部、指定地方title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
    <style>
        .box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
        .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
    style>
head>
<body>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box a">這部分是產(chǎn)品介紹.這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹這部分是產(chǎn)品介紹div>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box">div>
    <div class="box bottom">div>

    <div class="location">
         <p class="scroll_top">返回頂部p>
         <p class="scroll_a">產(chǎn)品介紹p>
         <p class="scroll_bottom">滑到底部p>
    div>
body>
html>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $(.scroll_top).click(function(){$(html,body).animate({scrollTop: 0px}, 800);}); 
        $(.scroll_a).click(function(){$(html,body).animate({scrollTop:$(.a).offset().top}, 800);});
        $(.scroll_bottom).click(function(){$(html,body).animate({scrollTop:$(.bottom).offset().top}, 800);});
    });
script>

云服務(wù)器 GPU云服務(wù)器滾動(dòng)到指定位置 js平滑滾動(dòng) 視圖平滑滾動(dòng) js 設(shè)置頁(yè)面滾動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1481.html

相關(guān)文章

scrollIntoView 與平滑滾動(dòng)

摘要：默認(rèn)值為，表示立刻滾到底即表示平滑滾動(dòng)。這時(shí)對(duì)錨點(diǎn)內(nèi)鏈觸發(fā)的視口滾動(dòng)同樣有效。它接受兩種形式的值布爾值或?qū)ο?。接受布爾值主要還是為了兼容不支持平滑滾動(dòng)老版的瀏覽器。表示行內(nèi)元素排列方向要滾動(dòng)到的位置。經(jīng)常有這樣的需求：點(diǎn)擊一個(gè)鏈接（內(nèi)鏈）跳轉(zhuǎn)到當(dāng)前頁(yè)面中間某個(gè)部分。對(duì)于這樣的需求，很容易想到使用錨點(diǎn)實(shí)現(xiàn)。但有一個(gè)問題：滾動(dòng)一步到位，太生硬了。我還是比較喜歡平滑滾動(dòng)。HTML5 中提...

darkbug 2019-08-22 13:49 評(píng)論0 收藏0
完美實(shí)現(xiàn)一個(gè)“回到頂部”

摘要：在瀏覽器中，頁(yè)面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁(yè)面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁(yè)面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評(píng)論0 收藏0
完美實(shí)現(xiàn)一個(gè)“回到頂部”

摘要：在瀏覽器中，頁(yè)面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁(yè)面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁(yè)面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評(píng)論0 收藏0
DOM知識(shí)整理

摘要：繼承接口對(duì)象不僅實(shí)現(xiàn)了接口，也實(shí)現(xiàn)了接口，用來標(biāo)識(shí)當(dāng)前窗口內(nèi)的文檔節(jié)點(diǎn)。繼承接口描述了所有相同種類的元素所普遍具有的方法和屬性。由于工作中一直在用框架來解決問題，在平時(shí)對(duì)dom的關(guān)注也比較少（特別像angular這種自己封裝了一層視圖層的框架，并不建議直接操作DOM），所以dom相關(guān)的知識(shí)也忘的差不多了,這次做公司產(chǎn)品的官網(wǎng)，沒有太多的交互和功能，直接用了原生js，正好借此整理一下遺...

huayeluoliuhen 2019-08-23 13:51 評(píng)論0 收藏0
MUI框架開發(fā)HTML5手機(jī)APP(二)--頁(yè)面跳轉(zhuǎn)傳值&底部選項(xiàng)卡切換

摘要：三底部選項(xiàng)卡切換頁(yè)面底部選項(xiàng)卡的切換，可以說是的標(biāo)志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁(yè)面的內(nèi)容，分別放置到主頁(yè)不同的中，當(dāng)我們點(diǎn)擊主頁(yè)的不同選項(xiàng)卡時(shí)，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學(xué)習(xí)了如何使用Hbuilder創(chuàng)建一個(gè)APP，同時(shí)如何使用MUI搭建屬于自己的第一款A(yù)PP，沒有學(xué)習(xí)的同學(xué)可以戳鏈接學(xué)習(xí)： http...

番茄西紅柿 2019-04-23 13:37 評(píng)論0 收藏0