[js常用]頁面滾動的頂部,指定位置或底部,平滑滾動

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

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

js平滑滾動到頂部、底部、指定地方

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js平滑滾動到頂部、底部、指定地方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>

云服務器 GPU云服務器滾動到指定位置 js平滑滾動視圖平滑滾動 js 設置頁面滾動

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

轉載請注明本文地址：http://m.hztianpu.com/yun/1481.html

scrollIntoView 與平滑滾動

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

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

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

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

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

littlelightss 2019-08-23 12:36 評論0 收藏0
DOM知識整理

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

huayeluoliuhen 2019-08-23 13:51 評論0 收藏0
MUI框架開發(fā)HTML5手機APP(二)--頁面跳轉傳值&底部選項卡切換

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

番茄西紅柿 2019-04-23 13:37 評論0 收藏0