`

div产生的滚动条如何回到顶部

 
阅读更多

        我话少,直接上代码,html代码比较乱,主要为了产生垂直滚动条,看js就Ok了,jquery.js自行下载,就不提供了,so easy!其实说白了就是控制这个div的垂直滚动条的偏移,这里回到顶部,所以就设置成0。顺带着也把页面的垂直滚动条也移到了最顶端。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery.js">
  </script>
	<script type="text/javascript">
	$(function(){
		$('#btn').click(function(){
			$('html,body').animate({scrollTop: '0px'}, 800);
			var container = $('#div1');
			$(container).scrollTop(
				0
			);
		})
	})
	</script>
    
 </head>

 <body>
 <div style="overflow-y:auto; height:500px;">
	  <div  id="div1" style="overflow-y:auto; height:200px;"> <div id="row_8"></div>English is a West Germanic language that was first spoken in early medieval England and is now a global lingua franca.[4][5] It is spoken as a first language by the majority populations of several sovereign states, including the United Kingdom, the United States, Canada, Australia, Ireland, New Zealand and a number of Caribbean nations; and it is an official language of almost 60 sovereign states. It is the third-most-common native language in the world, after Mandarin Chinese and Spanish.[6] It is widely learned as a second language and is an official language of the European Union, many Commonwealth countries and the United Nations, as well as in many world organisations.

English arose in the Anglo-Saxon kingdoms of England and what is now southeast Scotland. Following the extensive influence of Great Britain and the United Kingdom from the 17th to mid-20th centuries through the British Empire, it has been widely propagated around the world.[7][8][9][10] Through the spread of American-dominated media and technology,[11] English has become the leading language of international discourse and the lingua franca in many regions.[12][13]

Historically, English originated from the fusion of closely related dialects, now collectively termed Old English, which were brought to the eastern coast of Great Britain by Germanic settlers (Anglo-Saxons) by the 5th century; the word English is derived from the name of the Angles,[14] and ultimately from their ancestral region of Angeln (in what is now Schleswig-Holstein). The language was also influenced early on by the Old Norse language through Viking invasions in the 9th and 10th centuries.
The Norman conquest of England in the 11th century gave rise to heavy borrowings from Norman French, and vocabulary and spelling conventions began to give the appearance of a close relationship with those of Latin-derived Romance languages (though English is not a Romance language itself)[15][16] to what had then become Middle English. The Great Vowel Shift that began in the south of England in the 15th century is one of the historical events that mark the emergence of Modern English from Middle English.

In addition to words inherited natively from Anglo-Saxon and those borrowed from Norman French, a significant number of English terms are derived from constructions based on root words originally taken from Latin, because Latin in some form was the lingua franca of the Christian Church and of European intellectual life[17] and remains the wellspring of much modern scientific and technical vocabulary.

Owing to the assimilation of words from many other languages throughout history, modern English contains a very large vocabulary, with complex and irregular spelling, particularly of vowels. Modern English has not only assimilated words from other European languages, but from all over the world. The Oxford English Dictionary lists more than 250,000 distinct words, not including many technical, scientific, and slang terms.
</div>
    </div>
	<input id="btn" type="button" value="test">
   <div data-role="header" data-position="fixed" data-fullscreen="true">
		<div data-role="navbar">
			<ul>
				<li><a href="#" data-role="button">首页</a></li>
				<li><a href="#" data-role="button">页面二</a></li>
				<li><a href="#" data-role="button">搜索</a></li>
			</ul>
		</div>
   </div>

   <div data-role="content" style="padding:8px;">
		<ul id="details11">	
			<li>
    			<a href="#" data-role="button">按钮</a>
			</li> 
		</ul>
	</div>
 </body>
</html>

 

分享到:
评论

相关推荐

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    div随滚动条上下滚动

    // 获取滚动条顶部距离 $('#myDiv').css({ top: scrollTop + 'px' }); // 设置div的top值 }); ``` 这样,`#myDiv`就会随着滚动条的移动而上下移动。 3. **原生JavaScript实现** 如果不使用jQuery,也可以用...

    DIV滚动悬浮层(滚动条动,层不动)

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

    div随着滚动条滚动,但是到了顶部,便不随着滚动了

    ### div随着滚动条滚动,但是到了顶部,便不随着滚动了 #### 背景介绍 在网页设计中,有时我们需要让某个元素(如`&lt;div&gt;`)在页面滚动时保持固定的位置,或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    "让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中,我们常常需要让某个DIV元素固定在页面的某个位置,而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现,特别是使用fixed值。...

    jquery使用div实现滚动条效果

    本篇文章将详细讲解如何利用jQuery实现一个div元素的滚动条效果,以及涉及到的相关知识点。 首先,我们需要理解滚动条的基本概念。滚动条是当内容超出容器显示范围时出现的一种用户界面元素,允许用户查看或浏览不...

    js滚动条回到顶部的代码

    根据提供的文件内容,我们可以提炼出以下几点关于JS滚动条回到顶部的代码实现的知识点: 1. JS滚动条控制代码的主要目的是实现页面滚动条回到顶部的功能。这一点对于用户体验是十分重要的,尤其是在长页面中用户...

    JQuery 随鼠标滚动条滚动的div

    接着,当用户滚动窗口时,我们计算出滚动条的当前位置`scrollTop`,并根据这个值调整div的`top`属性,使得div始终保持在视口的顶部。 这个功能对于提高网站的交互性和可访问性非常有帮助,尤其是对于那些需要用户...

    js 随鼠标滚动条滚动的div

    在JavaScript中,实现一个div元素随鼠标滚动条滚动的效果,主要涉及到两个关键概念:事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素,即使页面滚动,它们仍然保持在视口中的特定位置。 ...

    实现div内部滚动条滚动到底部和顶部的代码

    "实现div内部滚动条滚动到底部和顶部的代码" 在Web开发中,实现div内部滚动条滚动到底部和顶部是非常常见的需求。今天,我们将分享一个简洁的代码,用于实现div内部滚动条滚动到底部和顶部的功能。 代码分析 首先...

    随滚动条移动的DIV层

    ### 随滚动条移动的DIV层:实现与解析 #### 一、概述 在网页设计与开发过程中,为了提高用户体验以及页面的交互性,常常会遇到需要制作一个随滚动条移动的元素(如提示框、广告栏等)。本文将通过分析一段具体的...

    滚动条下拉DIV固定在头部不动

    标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效,当用户滚动页面时,某个特定的DIV元素(例如一个导航栏)会保持在屏幕顶部,即使页面其他部分向下滚动,这个元素依然固定在视口的顶部。...

    浮动div,页面两边滚随滚动条滚动的DIV

    在本案例中,"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果,即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见,这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果,通常需要结合...

    div当滚动到页面顶部的时候固定在顶部实例代码

    `: 这一行获取当前滚动条的位置,以判断div是否应该被固定。 6. `if (st &gt; parseInt(dv.attr('otop'))) {...}`: 如果滚动位置大于div的初始位置,将执行相应的CSS更改,将div固定在顶部。 7. 对于IE6,由于不支持`...

    通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位

    本文将介绍如何使用JQuery实现div滚动条的自动定位。 首先,我们需要了解JQuery的基础知识。JQuery是一个快速、简洁的JavaScript库,它通过简化HTML文档遍历和事件处理、动画和Ajax交互,使得Web开发变得更加方便和...

    DIV向上滚动新闻,简洁JavaScript示例,高浏览器兼容性

    在这个示例中,JavaScript将被用来控制一个名为“DIV”的HTML元素,使其内容能够自下而上地平滑滚动,模拟新闻滚动条的效果。 描述中提到的“DIV向上滚动JavaScript示例,可用于实现新闻滚动效果,很简洁。”表明这...

    滚动条刷新定位

    这段代码的主要功能是监听页面滚动事件,并随着页面的滚动实时更新`div1`的位置,使其始终位于滚动条的顶部。虽然这种方法可以实现实时跟踪滚动条位置的功能,但并不符合“滚动条刷新定位”的需求。正确的做法应该是...

    vue 每次渲染完页面后div的滚动条保持在最底部的方法

    在Vue.js中,页面的动态内容更新会导致滚动条位置发生变化,特别是在列表或聊天窗口这类高度动态的场景中,用户希望能够保持滚动条在最新的内容区域,即通常所说的“滚动到底部”。为了实现这一功能,Vue提供了几个...

Global site tag (gtag.js) - Google Analytics