Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > 返回页面顶部top按钮通过锚点实现(自写)_javascript技巧

返回页面顶部top按钮通过锚点实现(自写)_javascript技巧

WBOY
Freigeben： 2016-05-16 17:23:49
Original
1172 Leute haben es durchsucht

实现了我的小跳槽以后，从8月7号入职了现在的这家公司，我好像是加入了救火队的行列，还没有开始开发新的模块，只是一直在实现已经上线模块中的新需求，有时候也真想问问，某些用户的脑子是不是进水了，提出来的需求只想让人大笑三声。。。幸好项目组做需求的姐姐工作经验十分丰富，能够很好地和用户协调，让我们这些开发人员也没那么辛苦~

用户在使用系统时，会有很多表单的操作，然而很多表单都是裹脚布啊，长啊长~

所以就需要一个返回页面顶部的top按钮啦~

虽然说网上的方法有很多种，但是未免过于繁琐。左一个判断又一个定位，总之，太麻烦啦~前人的代码拿来就用有时候是节约时间，但还是要根据系统的性能来综合考虑，为了不给浏览器以及服务器带来不必要的压力，我还是决定自己写一个top按钮~

在

标签中加入到页面顶部的锚点：
复制代码 代码如下:

a id="_top">

在的最末尾加入js代码（用div实现）：
复制代码 代码如下:

')
}
form_top();


设置top按钮的css样式（让div始终在页面右下角）：
复制代码 代码如下:

#form_top{display:block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/top.png");
width: 40px;
height:40px;
cursor: pointer;
}

最后，别忘了在jsp页面中引入css样式。

效果图：
返回页面顶部top按钮通过锚点实现(自写)_javascript技巧
Verwandte Etiketten：
返回顶部
Quelle：php.cn
Vorheriger Artikel：jQuery动态添加删除select项(实现代码)_jquery Nächster Artikel：js Math 对象的方法_基础知识
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Welches Format haben die Variablen im Rückgabewert? Ich bin ein PHP-Neuling. Ich habe einen Code gefunden: if($x<time()){return[false,'erro...
Aus 2024-04-06 21:55:20
0
1
778
Ermitteln Sie den gesamten Rückgabewert der Eingabefeldmethode Ich versuche, den vom Benutzer eingegebenen Gesamtwert zu ermitteln. Holen Sie sich ein Ag...
Aus 2024-04-06 18:19:37
0
1
380
Das Entity Warehouse erweitert JpaRepository<Entity, Id> und JpaSpecificationExecutor<Entity>, und EntitySpec erweitert Specification<Entity> Dies ist mein Endpunkt http://localhost:8080/country/alle Antworten sind für alle Länder i...
Aus 2024-04-06 17:11:03
0
1
421
Verwendung von Eloquent für interne Abfragen Die Bildadresse enthält den Standort und die Gesamtzahl der Benutzer. Users::with(['addres...
Aus 2024-04-06 16:45:50
0
1
515
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage