1. 程式人生 > >錨點,回到頂部效果

錨點,回到頂部效果

頁面過長就會有相到直接回到頂部多好啊,我就到網上找了些資料,寫了個demo

1,準備
js  images
2,使用 
專案中匯入js和images或者自己引用css樣式
<script src="tools/scrolltop/js/scrolltopcontrol.js" type="text/javascript"></script>

稍微修改scrolltopcontrol.js中的程式碼
若只是一個圖片 則使用:
controlHTML: '<img src="images/up.png" style="width:24px; height:24px" />',
若使用了css 則使用:
controlHTML: '<a href="#"></a>',
用css定義其圖片,
並且要註釋掉init:function中的
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
程式碼

自己新建個頁面,頁面中引用就可以了...

相關推薦

回到頂部效果

頁面過長就會有相到直接回到頂部多好啊,我就到網上找了些資料,寫了個demo 1,準備js  images 2,使用 專案中匯入js和images或者自己引用css樣式<script src="tools/scrolltop/js/scrolltopcontrol.js

網頁頂部

col lin size 沒有 scroll top 鏈接 出現 參數 一、錨鏈接 1 <div id="box" style="height:2000px; background:red;"></div> 2 <a href="#box"

js 聯動 撥渲染改變a標籤 定位 滾動 導航

本文出自: http://blog.csdn.net/wyk304443164 直接放程式碼,道理很簡單應該看得懂 /** * Created by wuyakun on 2017/7/11. */ var head_footer = {}; head_

讀懂這7讓SEO效果事半功倍

很多站長都抱怨現在SEO越來越難做了,之前就有很多人諮詢筆者這個問題,但是仔細看他們的網站後才發現,很多SEO優化細節都沒有做到位,筆者認為這是大家對SEO優化操作的認識並不瞭解,其實只要做好一些細節就能讓SEO效果事半功倍,下面小編就來給大家分享一下讓SEO效果事半功倍的7個細節,今天舉例說

如何新增調轉至指定段落

 本章目錄 1、先設定段落 2、在每個段落前新增,如下程式碼: 3、在目錄裡新增指定的錨點 4、總結4   如何新增錨點,調轉至指定段落 1、先設定段落 這是第一步,一定要顯示設定段落       2

相對路徑和絕對路徑

錨點              <a href="#值">文字</a>            需要跳轉到的地方打一個標記 <a name="值"></a>或            <h2 id="值">文字</

anguary建立二維陣列swiper建立返回到離開時的頁面。

     如果從資料庫中傳來了很多未知的資料,現在要把這些資料已3為分界線生成二維陣列。這個怎麼寫呢? let models = res.json().data.listRows;//後臺的資料 console.log(models)

微信小程式scroll-view選menu滾動到;滾動到啟用menu。

首先看看效果圖1、首先是點選選單,滾動列表,這個實現比較簡單。直接使用scroll-view 的 scroll-into-view屬性,小程式文件。<view class='container'> <!-- 選單 --> <view clas

iOS 設定為中心縮放

在CALayer中有一個很重要的概念,就是錨點,錨點是針對CALayer來說的,錨點到底是什麼呢?讓我們看看錨點到底是什麼?一下都是針對CALayer來說的。 首先我們先說一下什麼CALayer,CALayer就是一個圖層,可以讓我們看見的東西,但是他不具有事

jQuery頁面內滑動到導航效果回到頂部

在看別人的網頁的時候,有些頁面很長,但是中滑動到固定錨點的導航,感覺效果甚是不錯。於是便自己仿照著寫了一個,程式碼不是很精闢,但是實現了效果。希望對一些初學者有幫助,也希望大聲多給建議(最後有本效果的資源免費下載地址)…… js程式碼: /** * @author A

在頁面中有overflow-y:auto屬性的div,當出現滾動條擊返回頂部按鈕內容這個div最頂部

1.8 auto class blog click scrip title over nbt <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

連結不連結到頂部頂部有點距離

關於利用錨點定位的一個新思路:首先,通過錨點定位,頁面都是轉到頁面相應錨點居於頂端。因此,對於需要使頁面高度不變而只是利用錨點效果的使用來說,這非常不方便。現在有一個思路,即,若想錨點距離頂端有個固定的距離,則設定該錨點所在元素的border-top/padding-top=x,margin-

京東樓層跳躍效果(利用跳轉至對應樓層或者使用animate函式)

html <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="navWrap"> <li class="current"&g

原來操控介面可以這麼簡單----安卓上下滑動縮放頂部圖片左右滑動結束當前Activity及View柔和效果

先上效果圖: 上傳圖片不能超過2M,費了好大勁。每一張gif動的有點快,將就看。 首先說原理: 為activity的xml檔案根佈局新增setOnTouchListener。上下滑動和左右滑動的所有操作都是在OnTouchListener的onTouch方法中實現的,通過

JS實例之滾動固定效果實現頂部菜單固定效果

rip bsp 實現 con tel body text 滾動 title 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3

原生js實現“返回頂部效果

display nts top document tag 兼容 name () else html: <span>^</span> css body{ height: 3000px;

html基礎之(章節元素章節元素超鏈接)詳細

第四天章節元素<body></body> 文檔內容 只能一個<body>元素<header></header>頭部標簽 logo 導航<main></main>網站中重要內容 一個文檔中只能有一個<main>在&

angual+mui 雙欄上拉加載微信裏面禁用默認事件可用可以防止瀏覽器效果

apply length data mui this reat mobile ng- a10 //html 部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9

jquery實現選按鈕返回到頁面頂部效果

有的時候我們需要實現點選按鈕回到頁面頂部的效果,下面就是我的實現 首先HTML程式碼如下 <div class="QZ-up" style="display: none;"></div> 當滾動條高度大於120px的時候出現按鈕如下

地圖放大縮小以兩指中間的

地圖放大縮小,以兩指中間的點為錨點  該程式碼使用外掛Easy Touch ,DoTween using DG.Tweening; using UnityEngine; using HedgehogTeam.EasyTouch; public class