`

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固定在设定的地方,不跟着滚动条滚动!

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

    下面笔者就为大家分享一篇实现div内部滚动条滚动到底部和顶部的代码,代码简洁,具有很好的参考价值,希望对大家有所帮助

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

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

    js DIV滚动条随机位置的设置技巧

    style后面用于限定DIV样式并加滚动条,这个不多说 关键的地方其实很简单,最后两行Javascript就是了,起作用的只有最后一行: obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop:滚动条距离顶部的...

    react-double-scrollbar:向内容添加顶部水平滚动条

    React-Double滚动条将水平滚动条添加到元素的顶部。用法React.Component渲染方法中的示例: render ( ) { return ( &lt; div&gt; &lt; DoubleScrollbar&gt; &lt; table&gt; ... &lt; / table &gt; &lt; / DoubleScrollbar &gt; &lt; / div &gt; ...

    div浮层,滚动条移动,位置保持不变的4种方法汇总

    div在顶部不变、滚动条滚动,div还是在顶部!直接上传源码了: 方法一: 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    jquery判断滚动条距离顶部的距离方法

    今天小编就为大家分享一篇jquery判断滚动条距离顶部的距离方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    jquery控制滚动条下拉后DIV容器在页面中的位置

    此代码插件可控制DIV框框与顶部的距离,当页面下拉的时候,适中保持在一定的高度,随着页面滚动。 此效果中有三个案例,右侧依次是使用方法,简单方便

    基于jquery固定于顶部的导航响应浏览器滚动条事件

    今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部。效果图如下: 源码下载 实现的代码: html代码: ...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当...

    jquery实现点击页面回到顶部

    a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一...

    js操作滚动条事件实例

    下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 [removed] = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t &gt; 0) { $(".cbbfixed")....

    vue 中滚动条始终定位在底部的方法

    滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有...

    js网页滚动条滚动事件实例分析

    在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:[removed]。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部” js网页滚动条滚动事件 &lt;...

    监听滚轮事件

    //滚动条距离顶部的高度 console.log(scrollTop) if(scrollTop &gt; 100 ){ $('.div_last').show(200) // console.log(1) }else { $('.div_last').hide(200) // console.log(2) }; }); });

    原生js实现淘宝首页点击按钮缓慢回到顶部效果

    要侦听滚动条的变化,所以需要给window添加scroll事件,点击按钮回到顶部,按钮添加click事件。我们将事件处理程序封装成三个函数moveIn, moveOut, goTop; 下面先给出html/css代码 代码如下: &lt;div class=”container...

    JQuery点击事件回到页面顶部效果的实现代码

    //2个div,点击某个时回到顶部 &lt;div xss=removed&gt;111111111111111&lt;/div&gt; &lt;div id=top&gt;top&lt;/div&gt; &lt;引用JQuery&gt; [removed] $(function(){ $(#top).click(function() { $(html,body).animate({scrollTop:0}, 500)...

    html中dom元素滚动条滚动控制小结详解

    不知道大家有没有遇到过这样...scrollTop 属性是一个描述容器元素内容的top值与容器元素( viewport )视口顶部 top 值之间的差值,即容器中内容向上滑动后超出容器视口的部分。可以通过修改此属性控制滚动状态。 clientH

Global site tag (gtag.js) - Google Analytics